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

Neumorphismus-Lader

Neumorphism Loader Komponente mit Komplementärfarben

Offen

Neon_Glow_Autumn_Loader

Eine mäßig komplexe Loader-Komponente mit Neon-/Leuchteffekten und Herbstfarben, die für Buchungs- und Reservierungssysteme geeignet ist. Verfügt über responsives Design und Unterstützung für den Dunkelmodus.

Offen

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