Componentes Cargadoras Componente de cargadores

Componente de cargadores

Un componente de cargadores diseñado en el estilo Material Design con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.

Vista previa

Código HTML

<div class="flex flex-col items-center justify-center space-y-8 p-8 bg-gray-100 dark:bg-gray-800 min-h-screen">
    <!-- Circular Loader -->
    <div class="flex items-center justify-center">
        <div class="animate-spin rounded-full h-32 w-32 border-t-4 border-blue-500 border-solid dark:border-blue-300"></div>
    </div>

    <!-- Linear Loader -->
    <div class="w-full max-w-lg">
        <div class="h-2 bg-blue-500 rounded animate-pulse dark:bg-blue-300"></div>
    </div>

    <!-- Skeleton Loader -->
    <div class="flex space-x-4">
        <div class="h-12 w-12 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-4">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-4/5"></div>
        </div>
    </div>

    <!-- Image Loader -->
    <div class="w-64 h-48 bg-gray-200 dark:bg-gray-700 rounded shadow-md animate-pulse">
        <img src="https://picsum.photos/200/300" alt="Random Image" class="w-full h-full object-cover rounded" />
    </div>

    <!-- Avatar Loader -->
    <div class="flex items-center space-x-4">
        <div class="h-10 w-10 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
        <div class="flex-1 space-y-2">
            <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
            <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded animate-pulse w-3/4"></div>
        </div>
    </div>
</div>

Componentes relacionados

Cargador de neumorfismo

Un componente de cargador de estilo Neumorphism con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS. No se necesita JavaScript. Utiliza sombras sutiles para crear un efecto extruido desde el fondo. Modo oscuro compatible con CSS.

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

Comercio electrónico Autumn Dark Loader

Un componente de cargador sensible para aplicaciones de comercio electrónico, con colores otoñales sobre un fondo oscuro, diseñado para reducir la fatiga visual. Incluye tres animaciones de cargador distintas.

Abrir