CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

Lader-Komponente

Eine Loaders-Komponente, die im Material Design-Stil mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS entworfen wurde.

Vorschau

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>

Verwandte Komponenten

Lader-Komponente

Eine Loader-Komponente, die im Material Design-Stil gestaltet wurde, mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS.

Offen

Neumorphismus-Lader

Eine einfache Neumorphism-Loader-Komponente mit einem monochromatischen Farbschema für ein Portfolio, mit responsivem Design und Unterstützung für dunkle Themen.

Offen

Lader-Komponente

Eine reaktionsschnelle Loaders-Komponente, die für den Dunkelmodus entwickelt wurde, mit Erdtönen und moderater Komplexität für die Präsentation des Portfolios.

Offen