Componentes Cargadoras Cargador de juegos de Memphis

Cargador de juegos de Memphis

Un cargador de juegos divertido y audaz inspirado en el diseño de Memphis, con colores complementarios y formas geométricas para un ambiente de los años 80. Totalmente responsivo y compatible con el modo oscuro.

Vista previa

Código HTML

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
  <div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 transform -rotate-6">

    <!-- Main Circle (Teal) -->
    <div class="absolute inset-0 rounded-full bg-teal-500 dark:bg-emerald-600 shadow-xl overflow-hidden animate-pulse-slow p-4">
      <!-- Inner Circle Slice (Orange) -->
      <div class="absolute top-0 left-1/2 -translate-x-1/2 w-4/5 h-4/5 rounded-full bg-orange-400 dark:bg-amber-500 transform rotate-45 origin-bottom animate-spin-slow shadow-lg"></div>
    </div>

    <!-- Animated Squiggles/Patterns -->
    <div class="absolute top-8 left-8 w-20 h-20 bg-pink-400 dark:bg-fuchsia-600 rounded-full animate-bounce-slow shadow-md"></div>
    <div class="absolute bottom-12 right-10 w-16 h-16 bg-lime-400 dark:bg-lime-600 rounded-lg transform rotate-12 animate-wiggle-slow shadow-md"></div>
    <div class="absolute top-1/4 right-8 w-12 h-12 bg-yellow-300 dark:bg-yellow-500 rounded-full animate-spin-faster shadow-md"></div>
    <div class="absolute bottom-1/3 left-6 w-10 h-10 bg-blue-400 dark:bg-cyan-600 rounded-md transform -rotate-45 animate-fade-in-out shadow-md"></div>

    <!-- Central 'Loading' Text/Icon -->
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-purple-600 dark:bg-indigo-700 shadow-2xl flex items-center justify-center p-4 transform rotate-6 animate-scale-bounce">
        <div class="relative w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 rounded-full bg-purple-700 dark:bg-indigo-800 flex items-center justify-center border-4 border-dashed border-yellow-300 dark:border-yellow-500 animate-spin-slow-reverse">
            <svg class="w-16 h-16 sm:w-20 sm:h-20 text-white dark:text-gray-100 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536L14.752 11.168m0 0a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536 3.536a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536-3.536a-2.5 2.5 0 01-.707 3.536L12 17.5M9.5 12.000a-2.5 2.5 0 01-.707 3.536L12 17.5" />
            </svg>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
  @keyframes pulse-slow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
  }
  @keyframes spin-slow {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes spin-slow-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
  }
  @keyframes spin-faster {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  @keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-10px); }
    75% { transform: translateY(10px); }
  }
  @keyframes wiggle-slow {
    0%, 100% { transform: rotate(12deg); }
    50% { transform: rotate(-12deg); }
  }
  @keyframes fade-in-out {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1); }
  }
  @keyframes scale-bounce {
    0%, 100% { transform: scale(1) rotate(6deg); }
    50% { transform: scale(1.05) rotate(6deg); }
  }

  .animate-pulse-slow { animation: pulse-slow 3s infinite ease-in-out; }
  .animate-spin-slow { animation: spin-slow 10s linear infinite; }
  .animate-spin-slow-reverse { animation: spin-slow-reverse 8s linear infinite; }
  .animate-spin-faster { animation: spin-faster 4s linear infinite; }
  .animate-bounce-slow { animation: bounce-slow 4s infinite ease-in-out; }
  .animate-wiggle-slow { animation: wiggle-slow 6s infinite ease-in-out; }
  .animate-fade-in-out { animation: fade-in-out 5s infinite ease-in-out; }
  .animate-scale-bounce { animation: scale-bounce 2.5s infinite ease-in-out; }
</style>

Componentes relacionados

Spinner de carga en escala de grises

Un componente giratorio de carga simple con colores en escala de grises y enfoque de microinteracción.

Abrir

Componente de cargador Skeuomorphic

Un componente de cargador profesional y receptivo con un diseño esqueuomórfico, combinación de colores complementaria y compatibilidad con modo oscuro, adecuado para sitios web comerciales / corporativos. Cuenta con una barra de carga sutil y animada dentro de un contenedor metálico.

Abrir

Componente de cargador orgánico inspirado en la naturaleza

Un componente de carga de alto contraste, inspirado en la naturaleza, adecuado para sitios web comerciales y corporativos, con líneas fluidas y soporte para modo oscuro.

Abrir