Компоненты Погрузчики Компонент погрузчиков

Компонент погрузчиков

Сложный, отзывчивый, ретро-винтажный загрузчик для бизнес-сайтов с яркими цветами и поддержкой темного режима.

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
    </div>
    <div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
    <div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
    <div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
    <div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
  </div>

  <style>
    @keyframes spin-slow {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

    @keyframes pulse-fast {
      0%, 100% {
        transform: scale(0.9);
        opacity: 0.7;
      }
      50% {
        transform: scale(1);
        opacity: 1;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes spin-reverse {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(-360deg);
      }
    }

    .animate-spin-slow {
      animation: spin-slow 8s linear infinite;
    }

    .animate-pulse-fast {
      animation: pulse-fast 1.5s infinite;
    }

    .animate-bounce {
      animation: bounce 2s infinite;
    }

    .animate-spin-reverse {
      animation: spin-reverse 5s linear infinite;
    }
  </style>
</div>

Связанные компоненты

Компонент погрузчиков

Компонент загрузчиков, разработанный в 3D-формате, демонстрирующий анимацию загрузки с глубиной и вовлеченностью, отзывчивые эффекты и поддержку темных тем с использованием Tailwind CSS.

Открытый

Organic_Nature_Inspired_Food_Loader

Компонент загрузчика средней сложности для веб-сайтов с едой/ресторанами, отличающийся органичным, вдохновленным природой дизайном с приглушенными цветами и полной отзывчивостью, включая поддержку темного режима.

Открытый

Органический компонент погрузчика, вдохновленный природой

Высококонтрастный, вдохновленный природой компонент загрузки, подходящий для деловых и корпоративных веб-сайтов, с плавными линиями и поддержкой темного режима.

Открытый