Lader-Komponente
Eine komplexe, reaktionsschnelle Retro-Vintage-Loader-Komponente für Unternehmenswebsites mit lebendigen Farben und Unterstützung für den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative w-64 h-64 border-4 border-purple-500 rounded-full animate-spin-slow">
<div class="absolute inset-0 flex items-center justify-center">
<div class="w-24 h-24 bg-pink-500 rounded-full animate-pulse-fast"></div>
</div>
<div class="absolute top-0 left-0 w-16 h-16 -mt-8 -ml-8 bg-yellow-400 rounded-full animate-bounce"></div>
<div class="absolute bottom-0 right-0 w-16 h-16 -mb-8 -mr-8 bg-green-400 rounded-full animate-bounce delay-100"></div>
<div class="absolute top-0 right-0 w-12 h-12 -mt-6 -mr-6 bg-blue-400 rounded-full animate-spin-reverse"></div>
<div class="absolute bottom-0 left-0 w-12 h-12 -mb-6 -ml-6 bg-red-400 rounded-full animate-spin-reverse delay-100"></div>
</div>
<style>
@keyframes spin-slow {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes pulse-fast {
0%, 100% {
transform: scale(0.9);
opacity: 0.7;
}
50% {
transform: scale(1);
opacity: 1;
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes spin-reverse {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
.animate-spin-slow {
animation: spin-slow 8s linear infinite;
}
.animate-pulse-fast {
animation: pulse-fast 1.5s infinite;
}
.animate-bounce {
animation: bounce 2s infinite;
}
.animate-spin-reverse {
animation: spin-reverse 5s linear infinite;
}
</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.
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.