Components Loaders Loaders Component

Loaders Component

A Loaders Component designed in a Brutalist style with a focus on interactivity for business/corporate websites, featuring an analogous color scheme and responsive design with dark mode support. The design showcases different loader animations that capture the bold and raw aesthetic of brutalism.

Preview

HTML Code

<div class="min-h-screen flex flex-col items-center justify-center bg-gray-200 dark:bg-gray-800">
    <h1 class="text-4xl font-bold mb-8 text-gray-900 dark:text-white">Loaders</h1>
    <div class="flex justify-around w-full max-w-4xl">
        <!-- Loader 1 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-blue-500 dark:bg-blue-700 w-16 h-16 mb-4 rounded-full animate-bounce"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 1</span>
        </div>

        <!-- Loader 2 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-green-500 dark:bg-green-700 w-16 h-16 mb-4 rounded-full animate-spin"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 2</span>
        </div>

        <!-- Loader 3 -->
        <div class="flex flex-col items-center">
            <div class="loader bg-red-500 dark:bg-red-700 w-16 h-16 mb-4 rounded-full animate-ping"></div>
            <span class="text-lg text-gray-700 dark:text-gray-300">Loader 3</span>
        </div>
    </div>
</div>

<style>
    .loader::-webkit-animation: loader; /* For Safari */
    .loader-animation {
        animation: loader 1s infinite;
    }

    @keyframes loader {
        0% { transform: scale(1); }
        50% { transform: scale(1.5); }
        100% { transform: scale(1); }
    }
</style>

Related Components

Neumorphism Loader

A simple Neumorphism loader component with a Monochromatic color scheme for a portfolio, with responsive design and dark theme support.

Open

Glassmorphism Loader Component

A simple, glassmorphism-styled loader component with complementary colors, suitable for a portfolio, with responsive and dark mode support.

Open

Industrial_Rainbow_Healthcare_Loader

An industrial-style loader component for healthcare applications, featuring raw elements, a multi-color rainbow gradient, and full responsiveness with dark mode support. Utilizes simple CSS animations for the loading effect.

Open