CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
    <h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
    <div class="flex items-center justify-center space-x-4">
        <div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
        <div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
    </div>
    <div class="mt-8">
        <img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
    </div>
    <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>

<style>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

    .loader {
        @apply animate-spin;
    }

    @media (prefers-color-scheme: dark) {
        /* Dark mode styles */
        .loader {
            filter: brightness(1.2);
        }
    }
</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

Skeuomorphe Loader-Komponente

Eine professionelle, reaktionsschnelle Loader-Komponente mit einem skeuomorphen Design, komplementärem Farbschema und Unterstützung des Dunkelmodus, die für Geschäfts-/Unternehmenswebsites geeignet ist. Verfügt über eine dezente, animierte Ladeleiste in einem metallisch anmutenden Behälter.

Offen

MinimalistischerGraustufenLader

Minimalistisches/flaches Design, Graustufen-Farbschema, moderate Komplexität Loader-Komponente für Business-/Corporate-Websites mit responsivem Design und Unterstützung für dunkle Themen.

Offen