Componentes Cargadoras Componente de cargadores

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.

Vista previa

Código HTML

<div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Componentes relacionados

Componente de cargadores

Un componente de cargadores receptivo con soporte para modo oscuro.

Abrir

Cargador neumórfico

Un componente de cargador neumórfico simple para sitios de comercio electrónico con soporte para modo oscuro.

Abrir

Componente de cargadores neumórficos

Un componente de cargadores neumórficos con un esquema de color análogo, adecuado para un blog o sitio de contenido, con un diseño receptivo y soporte para temas oscuros.

Abrir