CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

Lader-Komponente

Eine Loaders-Komponente, die im brutalistischen Stil mit Schwerpunkt auf Interaktivität für Geschäfts-/Unternehmenswebsites gestaltet wurde, mit einem analogen Farbschema und responsivem Design mit Unterstützung des Dunkelmodus. Das Design zeigt verschiedene Ladeanimationen, die die kühne und rohe Ästhetik des Brutalismus einfangen.

Vorschau

HTML-Code 

<div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Verwandte Komponenten

Lader-Komponente

Eine Loaders-Komponente, die mit einem skeuomorphen Stil unter Verwendung eines triadischen Farbschemas für einen Blog oder eine inhaltsorientierte Website entworfen wurde. Es verfügt über ein einfaches Layout, das für den Konsum von Inhalten geeignet ist, und unterstützt den Dunkelmodus.

Offen

Lader-Komponente

Eine Laderkomponente im Material Design-Stil mit einem responsiven Design für die Präsentation von Arbeiten oder Produkten, mit einem dunklen Design und unter Verwendung von Tailwind CSS.

Offen

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