Composants Chargeuses Composant des chargeurs

Composant des chargeurs

Un composant Loaders conçu dans le style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

<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>

Composants associés

Composant des chargeurs

Un composant Loaders réactif conçu pour le mode sombre, avec des tons de terre et une complexité modérée pour la présentation du portfolio.

Ouvrir

MinimalisteNiveaux de GrisLoader

Design minimaliste/plat, palette de couleurs en niveaux de gris, composant de chargement de complexité modérée pour les sites Web d’entreprise/d’entreprise avec un design réactif et une prise en charge du thème sombre.

Ouvrir

Cône de chargement en niveaux de gris

Un composant de spinner de chargement simple avec des couleurs en niveaux de gris et un focus de micro-interaction.

Ouvrir