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 Loader-Komponente im Neumorphism-Stil mit responsiven Effekten und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Es wird kein JavaScript benötigt. Verwendet subtile Schatten, um einen extrudierten Effekt aus dem Hintergrund zu erzeugen. Dunkler Modus, der mit CSS unterstützt wird.

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

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