CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

Lader-Komponente

Eine einfache Ladekomponente, die für Social-Media-Schnittstellen im Dunkelmodus mit einem monochromatischen Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
    <div class="flex">
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
        <div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
    </div>
    <div class="flex flex-col items-center ml-4">
        <h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
        <div class="flex space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
        </div>
    </div>
</div>
<style>
    @keyframes bounce {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-15px);
        }
    }
</style>

Verwandte Komponenten

Organische, von der Natur inspirierte Laderkomponente

Eine kontrastreiche, von der Natur inspirierte Ladekomponente, die sich für Geschäfts- und Unternehmenswebsites eignet, mit fließenden Linien und Unterstützung für den Dunkelmodus.

Offen

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.

Offen

Lader-Komponente

Eine Laderkomponente, die auf den Prinzipien des Material Designs basiert und Tailwind CSS-Unterstützung für den Dunkelmodus und reaktionsschnelle Effekte bietet.

Offen