Lader-Komponente
Eine 3D-gestaltete Loaders-Komponente, die Ladeanimationen mit Tiefe und Engagement, reaktionsschnelle Effekte und Unterstützung für dunkle Themen mit Tailwind CSS zeigt.
HTML-Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
<div class="flex space-x-4">
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
</div>
<div class="mt-8 flex flex-col items-center">
<img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
</div>
</div>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.
Neumorphismus-Lader
Loader-Komponente mit Neumorphism-Stil und Pastell-Farbschema für den E-Commerce. Einfache Komplexität, reaktionsschnell mit Unterstützung des Dunkelmodus. Kein JavaScript.
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.