Componentes Cargadoras Componente del cargador de Glassmorphism

Componente del cargador de Glassmorphism

Un componente de cargador simple, de estilo glassmorphism, con colores complementarios, adecuado para una cartera, con soporte de modo responsivo y oscuro.

Vista previa

Código HTML

<div class="flex h-screen items-center justify-center bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-900 dark:to-black">
  <div class="relative transform cursor-pointer rounded-2xl bg-white bg-opacity-10 p-8 shadow-2xl backdrop-blur-xl backdrop-filter transition-all duration-300 hover:scale-105 dark:bg-gray-700 dark:bg-opacity-10">
    <div class="absolute inset-0 -z-10 rounded-2xl bg-gradient-to-br from-blue-300 via-purple-300 to-pink-300 opacity-20 blur-xl dark:from-gray-700 dark:via-gray-800 dark:to-black"></div>
    <div class="loader-dots relative flex h-24 w-24 transform items-center justify-center space-x-2 rounded-full bg-white bg-opacity-20 shadow-inner dark:bg-gray-800 dark:bg-opacity-20">
      <div class="h-4 w-4 animate-bounce rounded-full bg-blue-600 dark:bg-blue-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-purple-600 delay-75 dark:bg-purple-400"></div>
      <div class="h-4 w-4 animate-bounce rounded-full bg-pink-600 delay-150 dark:bg-pink-400"></div>
    </div>
    <p class="mt-4 text-center text-lg font-semibold text-gray-800 dark:text-gray-200">Loading Awesomeness...</p>
  </div>

  <style>
    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }
      50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

    .loader-dots div {
      animation: bounce 1s infinite;
    }

    .loader-dots div:nth-child(2) {
      animation-delay: 0.1s;
    }

    .loader-dots div:nth-child(3) {
      animation-delay: 0.2s;
    }
  </style>
</div>

Componentes relacionados

Neon_Glow_Autumn_Loader

Un componente de cargador moderadamente complejo con efectos de neón/resplandor y colores otoñales, adecuado para sistemas de reserva y reservas. Cuenta con diseño responsivo y soporte para modo oscuro.

Abrir

Componente de cargadores

Un componente de cargadores diseñado en un estilo brutalista con un enfoque en la interactividad para sitios web comerciales / corporativos, con un esquema de color análogo y un diseño receptivo con soporte para modo oscuro. El diseño muestra diferentes animaciones de cargadores que capturan la estética audaz y cruda del brutalismo.

Abrir

Componente de cargadores

Un componente de cargadores diseñado en 3D que muestra animaciones de carga con profundidad y compromiso, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.

Abrir