CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

Lader-Komponente

Eine einfache Loader-Komponente, die im Neumorphism-Stil für den Konsum von Inhalten mit einem komplementären Farbschema entwickelt wurde.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
    <div class="bg-white dark:bg-gray-700 shadow-neumorphism rounded-lg p-6 w-80">
        <div class="animate-pulse">
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-4"></div>
            <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
        </div>
    </div>
    <div class="mt-8 flex flex-col items-center">
        <img src="https://picsum.photos/100" class="rounded-full shadow-neumorphism" alt="Random image cat">
        <div class="mt-2 font-semibold text-lg text-gray-800 dark:text-gray-200">Loading...</div>
    </div>
</div>
<style>
    .shadow-neumorphism {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.2), 
                    -8px -8px 16px rgba(255, 255, 255, 0.7);
    }
</style>

Verwandte Komponenten

Lader-Komponente

Eine komplexe, reaktionsschnelle Loader-Komponente im Glassmorphism-Stil für den E-Commerce mit einem triadischen Farbschema und Unterstützung für den Dunkelmodus, die HTML und Tailwind CSS verwendet.

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

NeonGlowWeatherLoader

Eine einfache, reaktionsschnelle Wetter-/Klima-Loader-Komponente mit Neon-Leuchteffekten, einer Schwarz-Weiß-Basis und einer lebendigen Akzentfarbe, einschließlich Unterstützung des Dunkelmodus.

Offen