Memphis Gaming Ladeautomat
Ein verspielter und mutiger Gaming-Loader, der vom Memphis-Design inspiriert ist, mit Komplementärfarben und geometrischen Formen für einen 80er-Jahre-Vibe. Vollständig reaktionsschnell und unterstützt den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-gray-900 dark:to-gray-800 p-4 font-sans">
<div class="relative w-64 h-64 sm:w-80 sm:h-80 md:w-96 md:h-96 transform -rotate-6">
<!-- Main Circle (Teal) -->
<div class="absolute inset-0 rounded-full bg-teal-500 dark:bg-emerald-600 shadow-xl overflow-hidden animate-pulse-slow p-4">
<!-- Inner Circle Slice (Orange) -->
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-4/5 h-4/5 rounded-full bg-orange-400 dark:bg-amber-500 transform rotate-45 origin-bottom animate-spin-slow shadow-lg"></div>
</div>
<!-- Animated Squiggles/Patterns -->
<div class="absolute top-8 left-8 w-20 h-20 bg-pink-400 dark:bg-fuchsia-600 rounded-full animate-bounce-slow shadow-md"></div>
<div class="absolute bottom-12 right-10 w-16 h-16 bg-lime-400 dark:bg-lime-600 rounded-lg transform rotate-12 animate-wiggle-slow shadow-md"></div>
<div class="absolute top-1/4 right-8 w-12 h-12 bg-yellow-300 dark:bg-yellow-500 rounded-full animate-spin-faster shadow-md"></div>
<div class="absolute bottom-1/3 left-6 w-10 h-10 bg-blue-400 dark:bg-cyan-600 rounded-md transform -rotate-45 animate-fade-in-out shadow-md"></div>
<!-- Central 'Loading' Text/Icon -->
<div class="absolute inset-0 flex items-center justify-center">
<div class="relative w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 rounded-full bg-purple-600 dark:bg-indigo-700 shadow-2xl flex items-center justify-center p-4 transform rotate-6 animate-scale-bounce">
<div class="relative w-24 h-24 sm:w-32 sm:h-32 md:w-40 md:h-40 rounded-full bg-purple-700 dark:bg-indigo-800 flex items-center justify-center border-4 border-dashed border-yellow-300 dark:border-yellow-500 animate-spin-slow-reverse">
<svg class="w-16 h-16 sm:w-20 sm:h-20 text-white dark:text-gray-100 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536l-3.197 3.197m0 0a-2.5 2.5 0 01-3.536 0L5.343 12.000m8.892-8.892a-2.5 2.5 0 010 3.536L14.752 11.168m0 0a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536 3.536a-2.5 2.5 0 010 3.536L14.752 14.752m-3.536-3.536a-2.5 2.5 0 01-.707 3.536L12 17.5M9.5 12.000a-2.5 2.5 0 01-.707 3.536L12 17.5" />
</svg>
</div>
</div>
</div>
</div>
</div>
<style>
@keyframes pulse-slow {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.02); }
}
@keyframes spin-slow {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes spin-slow-reverse {
0% { transform: rotate(0deg); }
100% { transform: rotate(-360deg); }
}
@keyframes spin-faster {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-10px); }
75% { transform: translateY(10px); }
}
@keyframes wiggle-slow {
0%, 100% { transform: rotate(12deg); }
50% { transform: rotate(-12deg); }
}
@keyframes fade-in-out {
0%, 100% { opacity: 0; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1); }
}
@keyframes scale-bounce {
0%, 100% { transform: scale(1) rotate(6deg); }
50% { transform: scale(1.05) rotate(6deg); }
}
.animate-pulse-slow { animation: pulse-slow 3s infinite ease-in-out; }
.animate-spin-slow { animation: spin-slow 10s linear infinite; }
.animate-spin-slow-reverse { animation: spin-slow-reverse 8s linear infinite; }
.animate-spin-faster { animation: spin-faster 4s linear infinite; }
.animate-bounce-slow { animation: bounce-slow 4s infinite ease-in-out; }
.animate-wiggle-slow { animation: wiggle-slow 6s infinite ease-in-out; }
.animate-fade-in-out { animation: fade-in-out 5s infinite ease-in-out; }
.animate-scale-bounce { animation: scale-bounce 2.5s infinite ease-in-out; }
</style>
Verwandte Komponenten
Lader-Komponente
Eine Laderkomponente im Material Design-Stil mit einem responsiven Design für die Präsentation von Arbeiten oder Produkten, mit einem dunklen Design und unter Verwendung von Tailwind CSS.
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.
NeonGlowWeatherLoader
Eine einfache, reaktionsschnelle Wetter-/Klima-Loader-Komponente mit Neon-Leuchteffekten, einer Schwarz-Weiß-Basis und einer lebendigen Akzentfarbe, einschließlich Unterstützung des Dunkelmodus.