CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

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.

Vorschau

HTML-Code 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader">
        <div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
        <div class="mt-5 text-center">
            <img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
            <div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
        </div>
    </div>
</div>
<style>
    .loader {
        background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
        border-radius: 15px;
        box-shadow: 20px 20px 60px #d1d1d1,
                    -20px -20px 60px #ffffff;
        padding: 20px;
    }
</style>

Verwandte Komponenten

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

Glassmorphism Loader-Komponente

Eine einfache Loader-Komponente im Glassmorphism-Stil mit Komplementärfarben, die für ein Portfolio geeignet ist, mit Unterstützung für reaktionsschnelle und dunkle Modi.

Offen

Neumorphismus-Lader

Loader-Komponente mit Neumorphism-Stil und Pastell-Farbschema für den E-Commerce. Einfache Komplexität, reaktionsschnell mit Unterstützung des Dunkelmodus. Kein JavaScript.

Offen