Komponenten Lader Retro_Vintage_Loader_Component

Retro_Vintage_Loader_Component

Eine einfache, reaktionsschnelle Loader-Komponente im Retro-/Vintage-Stil mit Sepia-/Brauntönen, die sich für Event- und Konferenz-Websites eignet und den Dunkelmodus unterstützt.

Vorschau

HTML-Code

<div class="p-4 md:p-8 flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 font-mono">
    <div class="w-full max-w-sm p-6 md:p-8 rounded-lg shadow-xl border-2 border-amber-800 dark:border-amber-600 bg-amber-50 dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
        <div class="text-center mb-6">
            <p class="text-2xl md:text-3xl font-bold text-amber-900 dark:text-amber-200 uppercase tracking-widest leading-tight">
                Initializing
            </p>
            <p class="text-sm md:text-base text-amber-700 dark:text-amber-400 mt-1">
                Please stand by...
            </p>
        </div>

        <div class="flex items-center justify-center space-x-2 animate-pulse mb-6">
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.1s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.2s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.3s;"></div>
            <div class="w-4 h-4 md:w-5 md:h-5 bg-amber-600 dark:bg-amber-400 rounded-full animate-bounce-custom" style="animation-delay: 0.4s;"></div>
        </div>

        <div class="w-full bg-amber-200 dark:bg-gray-700 rounded-full h-3 mb-4 overflow-hidden retro-progress-bar">
            <div class="bg-amber-700 dark:bg-amber-500 h-3 rounded-full animate-progress-fill origin-left" style="width: 0%;"></div>
        </div>

        <div class="text-center text-xs md:text-sm text-gray-600 dark:text-gray-400">
            <p>Loading essential modules...</p>
        </div>
    </div>

    <style>
        .animate-bounce-custom {
            animation: bounce-custom 1.5s infinite ease-in-out;
        }

        @keyframes bounce-custom {
            0%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-10px);
            }
        }

        @keyframes progress-fill {
            0% {
                width: 0%;
            }
            100% {
                width: 100%;
            }
        }

        .animate-progress-fill {
            animation: progress-fill 2s forwards linear;
        }

        .retro-progress-bar {
            box-shadow: inset 0 0 5px rgba(0,0,0,0.2) relevant;
        }
    </style>
</div>

Verwandte Komponenten

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

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

Industrial_Rainbow_Healthcare_Loader

Eine Loader-Komponente im Industriestil für Anwendungen im Gesundheitswesen mit rohen Elementen, einem mehrfarbigen Regenbogenverlauf und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus. Verwendet einfache CSS-Animationen für den Ladeeffekt.

Offen