Componenti caricatori
Un componente Loader progettato in 3D che mostra le animazioni di caricamento con profondità e coinvolgimento, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<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>Componenti correlati
Componente del caricatore organico ispirato alla natura
Un componente di caricamento ad alto contrasto, ispirato alla natura, adatto per siti Web aziendali e aziendali, con linee fluide e supporto per la modalità scura.
Componenti caricatori
Un semplice componente del caricatore in modalità scura con una combinazione di colori complementari.
Caricatore di neumorfismo
Un componente loader in stile Neumorphism con effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS. Non è necessario alcun JavaScript. Utilizza ombre sottili per creare un effetto estruso dallo sfondo. Modalità oscura supportata con CSS.