Componenti caricatori
Un componente loader progettato in stile Material Design, con 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">
<div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
</div>
</div>Componenti correlati
Componenti caricatori
Un componente loader complesso, reattivo, in stile Glassmorphism per l'e-commerce, con una combinazione di colori triadica e supporto per la modalità scura, utilizzando HTML e Tailwind CSS.
Neon_Glow_Autumn_Loader
Un componente loader moderatamente complesso con effetti neon/bagliore e colori autunnali, adatto per sistemi di prenotazione e prenotazione. Presenta un design reattivo e il supporto della modalità scura.
Caricatore di neumorfismo
Un semplice componente del caricatore di neumorfismo con una combinazione di colori monocromatica per un portfolio, con design reattivo e supporto per temi scuri.