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

Componente de cargadores

Un componente de cargadores diseñado con un estilo esqueuomórfico que utiliza un esquema de color triádico para un blog o sitio web centrado en el contenido. Cuenta con un diseño simple apropiado para el consumo de contenido, incorporando soporte para el 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

Cargador de neumorfismo

Componente de cargador con estilo Neumorphism y esquema de color Pastel para comercio electrónico. Complejidad simple, receptivo con soporte para modo oscuro. Sin JavaScript.

Abrir