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.

public/styles/global.css

@@ -23,11 +23,13 @@
 /* Базовые стили */
 html {
   scroll-behavior: smooth;
+  background: linear-gradient(135deg, #111827, #1f2937, #111827);
+  min-height: 100vh;
 }
 
 body {
-  background-color: #f7f7f7;
+  background: linear-gradient(135deg, #111827, #1f2937, #111827);
-  color: #2c2c2c;
+  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;
+  }
+}

src/layouts/Layout.astro

@@ -121,10 +121,146 @@ const allKeywords = `${commonKeywords}, ${silverKeywords}, ${goldKeywords}`;
     <slot name="head" />
   </head>
   <body class="bg-gradient-to-br from-gray-900 via-gray-800 to-black text-white">
+    <!-- Загрузчик страницы -->
+    <div id="page-loader" class="fixed inset-0 bg-gradient-to-br from-gray-900 via-gray-800 to-black z-50 flex items-center justify-center">
+      <div class="text-center">
+        <!-- Логотип -->
+        <div class="mb-8">
+          <img src="/logo.svg" alt="ООО «ДМДК»" class="h-16 xs:h-20 sm:h-24 md:h-28 lg:h-32 mx-auto animate-logo-pulse" />
+        </div>
+        
+        <!-- Название компании -->
+        <h1 class="text-2xl xs:text-3xl sm:text-4xl md:text-5xl font-bold text-white font-nevduplenysh mb-6 xs:mb-8 animate-fade-in">
+          ООО «ДМДК»
+        </h1>
+        
+        <!-- Подзаголовок -->
+        <p class="text-gray-300 text-sm xs:text-base lg:text-lg font-gilroy mb-8 animate-fade-in" style="animation-delay: 0.3s;">
+          Драгоценные металлы высшей пробы
+        </p>
+        
+        <!-- Анимированные точки загрузки -->
+        <div class="flex justify-center space-x-2 mb-8">
+          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce"></div>
+          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.1s;"></div>
+          <div class="w-3 h-3 xs:w-4 xs:h-4 bg-yellow-400 rounded-full animate-enhanced-bounce" style="animation-delay: 0.2s;"></div>
+        </div>
+        
+        <!-- Прогресс бар -->
+        <div class="w-64 xs:w-80 sm:w-96 mx-auto">
+          <div class="bg-gray-700 rounded-full h-2 xs:h-3 overflow-hidden shadow-inner">
+            <div id="progress-bar" class="progress-shimmer h-full rounded-full transition-all duration-300 ease-out" style="width: 0%"></div>
+          </div>
+          <p id="loading-text" class="text-gray-300 text-sm xs:text-base mt-4 font-gilroy">Загрузка...</p>
+        </div>
+        
+        <!-- Декоративные элементы -->
+        <div class="absolute inset-0 opacity-10 pointer-events-none">
+          <div class="absolute top-1/4 left-1/4 w-32 h-32 xs:w-48 xs:h-48 bg-yellow-500 rounded-full blur-3xl animate-pulse"></div>
+          <div class="absolute bottom-1/4 right-1/4 w-40 h-40 xs:w-60 xs:h-60 bg-yellow-400 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
+          <div class="absolute top-1/2 left-1/3 w-24 h-24 xs:w-36 xs:h-36 bg-yellow-300 rounded-full blur-2xl animate-pulse" style="animation-delay: 1s;"></div>
+        </div>
+      </div>
+    </div>
+
+    <div id="page-content" style="display: none;">
       <Header />
       <slot />
       <FloatingFAQ />
       <Up />
       <Footer />
+    </div>
+
+    <!-- Скрипт для управления загрузчиком -->
+    <script>
+      document.addEventListener('DOMContentLoaded', function() {
+        const loader = document.getElementById('page-loader');
+        const progressBar = document.getElementById('progress-bar');
+        const loadingText = document.getElementById('loading-text');
+        let progress = 0;
+        
+        // Массив сообщений для загрузки
+        const loadingMessages = [
+          'Загрузка...',
+          'Подготовка драгоценных металлов...',
+          'Инициализация системы...',
+          'Проверка качества...',
+          'Почти готово...'
+        ];
+        
+        let messageIndex = 0;
+        
+        // Функция для скрытия загрузчика
+        function hideLoader() {
+          const pageContent = document.getElementById('page-content');
+          loadingText.textContent = 'Готово!';
+          
+          setTimeout(() => {
+            loader.style.opacity = '0';
+            loader.style.transform = 'scale(0.95)';
+            loader.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
+            
+            setTimeout(() => {
+              loader.style.display = 'none';
+              pageContent.style.display = 'block';
+              document.body.style.overflow = 'auto';
+            }, 500);
+          }, 300);
+        }
+        
+        // Анимация прогресс-бара
+        const progressInterval = setInterval(() => {
+          progress += Math.random() * 12 + 3; // Случайный прирост от 3 до 15%
+          if (progress > 100) progress = 100;
+          
+          progressBar.style.width = progress + '%';
+          
+          // Обновляем сообщение в зависимости от прогресса
+          if (progress >= 20 && messageIndex === 0) {
+            messageIndex = 1;
+            loadingText.textContent = loadingMessages[messageIndex];
+          } else if (progress >= 40 && messageIndex === 1) {
+            messageIndex = 2;
+            loadingText.textContent = loadingMessages[messageIndex];
+          } else if (progress >= 60 && messageIndex === 2) {
+            messageIndex = 3;
+            loadingText.textContent = loadingMessages[messageIndex];
+          } else if (progress >= 80 && messageIndex === 3) {
+            messageIndex = 4;
+            loadingText.textContent = loadingMessages[messageIndex];
+          }
+          
+          if (progress >= 100) {
+            clearInterval(progressInterval);
+            hideLoader();
+          }
+        }, 80);
+        
+        // Блокируем прокрутку во время загрузки и скрываем контент
+        document.body.style.overflow = 'hidden';
+        const pageContent = document.getElementById('page-content');
+        pageContent.style.display = 'none';
+        
+        // Принудительно скрыть загрузчик через 4 секунды на случай медленной загрузки
+        setTimeout(() => {
+          if (loader.style.display !== 'none') {
+            progress = 100;
+            progressBar.style.width = '100%';
+            clearInterval(progressInterval);
+            hideLoader();
+          }
+        }, 4000);
+        
+        // Скрыть загрузчик когда страница полностью загружена
+        window.addEventListener('load', function() {
+          if (progress < 100) {
+            progress = 100;
+            progressBar.style.width = '100%';
+            clearInterval(progressInterval);
+            hideLoader();
+          }
+        });
+      });
+    </script>
   </body>
 </html>