Components Loaders Loaders Component

Loaders Component

A loaders component designed based on Material Design principles with Tailwind CSS support for dark mode and responsive effects.

Preview

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>

Related Components

Memphis_Food_Loader

A simple, responsive food-themed loader component with Memphis design elements, warm neutral colors, and dark mode support, suitable for food delivery and restaurant websites.

Open

Organic_Nature_Inspired_Food_Loader

A moderate complexity loader component for food/restaurant websites, featuring an organic, nature-inspired design with muted colors and full responsiveness, including dark mode support.

Open

E-commerce Autumn Dark Loader

A responsive loader component for e-commerce applications, featuring autumn colors on a dark background, designed to reduce eye strain. Includes three distinct loader animations.

Open