CCHub Logo CCHub Tailwind Collection
Komponenten Lader Lader-Komponente

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.

Vorschau

HTML-Code 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
        <div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
            <div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
            <p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
        </div>
    </div>
</div>

Verwandte Komponenten

Neumorpher Lader

Eine einfache neumorphische Loader-Komponente für E-Commerce-Websites mit Unterstützung des Dunkelmodus.

Offen

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

Lader-Komponente

Eine Loaders-Komponente, die im Material Design-Stil mit responsiven Effekten und Unterstützung für dunkle Designs unter Verwendung von Tailwind CSS entworfen wurde.

Offen