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

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

Composant de chargeur skeuomorphe

Un composant de chargement professionnel et réactif avec un design skeuomorphe, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise. Comprend une barre de chargement subtile et animée à l’intérieur d’un conteneur métallique.

Ouvrir

Retro_Vintage_Loader_Component

Un composant de chargement simple et réactif sur le thème rétro/vintage avec des tons sépia/brun, adapté aux sites Web d’événements et de conférences, avec prise en charge du mode sombre.

Ouvrir