Add page loader and enhance loading animations: Implemented a new page loader with animated elements and progress bar for improved user experience during content loading. Updated global styles for consistency and responsiveness across various screen sizes.
This commit is contained in:
albivkt
@ -23,11 +23,13 @@
|
||||
/* Базовые стили */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #f7f7f7;
|
||||
color: #2c2c2c;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Отступы от фиксированного хедера */
|
||||
@ -303,3 +305,354 @@ body {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Стили для загрузчика страницы */
|
||||
#page-loader {
|
||||
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
||||
}
|
||||
|
||||
/* Стили для контента страницы */
|
||||
#page-content {
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in;
|
||||
}
|
||||
|
||||
/* Предотвращение белого фона во время загрузки */
|
||||
html, body {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #111827, #1f2937, #111827);
|
||||
}
|
||||
|
||||
/* Анимация появления для загрузчика */
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.8s ease-out;
|
||||
}
|
||||
|
||||
/* Улучшенная анимация bounce для точек загрузки */
|
||||
@keyframes enhanced-bounce {
|
||||
0%, 20%, 53%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40%, 43% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
70% {
|
||||
transform: translateY(-7px);
|
||||
}
|
||||
90% {
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-enhanced-bounce {
|
||||
animation: enhanced-bounce 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Анимация пульсации для логотипа */
|
||||
@keyframes logo-pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.8;
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-logo-pulse {
|
||||
animation: logo-pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Градиентная анимация для прогресс-бара */
|
||||
@keyframes progress-shimmer {
|
||||
0% {
|
||||
background-position: -200px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: calc(200px + 100%) 0;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#fbbf24 25%,
|
||||
#f59e0b 50%,
|
||||
#fbbf24 75%
|
||||
);
|
||||
background-size: 200px 100%;
|
||||
animation: progress-shimmer 2s infinite;
|
||||
}
|
||||
|
||||
/* Адаптивные стили для загрузчика */
|
||||
|
||||
/* Очень маленькие экраны (до 320px) */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.25rem !important;
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.75rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 12rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 3rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 0.5rem !important;
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Маленькие экраны (320px - 479px) */
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .text-center {
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 1.5rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 0.875rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 14rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Средние экраны (480px - 767px) */
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2rem !important;
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 18rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Планшеты (768px - 1027px) */
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .text-center {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 2.5rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.125rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 24rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1rem !important;
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Ноутбуки (1028px - 1439px) */
|
||||
@media (min-width: 1028px) and (max-width: 1439px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3rem !important;
|
||||
margin-bottom: 2rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 28rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.25rem !important;
|
||||
height: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Большие экраны (1440px+) */
|
||||
@media (min-width: 1440px) {
|
||||
#page-loader .text-center {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
|
||||
#page-loader h1 {
|
||||
font-size: 3.5rem !important;
|
||||
margin-bottom: 2.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader p {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-64 {
|
||||
width: 32rem !important;
|
||||
}
|
||||
|
||||
#page-loader img {
|
||||
height: 8rem !important;
|
||||
}
|
||||
|
||||
#page-loader .w-3 {
|
||||
width: 1.5rem !important;
|
||||
height: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Дополнительные адаптивные стили для декоративных элементов */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 5rem !important;
|
||||
height: 5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 3rem !important;
|
||||
height: 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .absolute.top-1\/4 {
|
||||
width: 6rem !important;
|
||||
height: 6rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.bottom-1\/4 {
|
||||
width: 7rem !important;
|
||||
height: 7rem !important;
|
||||
}
|
||||
|
||||
#page-loader .absolute.top-1\/2 {
|
||||
width: 4rem !important;
|
||||
height: 4rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для прогресс-бара */
|
||||
@media (max-width: 319px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 320px) and (max-width: 479px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.625rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1027px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1028px) {
|
||||
#page-loader .bg-gray-700 {
|
||||
height: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Адаптивные стили для отступов между элементами */
|
||||
@media (max-width: 479px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 480px) and (max-width: 767px) {
|
||||
#page-loader .mb-8 {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mb-6 {
|
||||
margin-bottom: 1.25rem !important;
|
||||
}
|
||||
|
||||
#page-loader .mt-4 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user