Componenti caricatori
Un componente Loader progettato con uno stile scheumorfico utilizzando una combinazione di colori triadica per un blog o un sito Web incentrato sui contenuti. È dotato di un layout semplice appropriato per il consumo di contenuti, che incorpora il supporto della modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader">
<div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
<div class="mt-5 text-center">
<img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
<div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
</div>
</div>
</div>
<style>
.loader {
background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
border-radius: 15px;
box-shadow: 20px 20px 60px #d1d1d1,
-20px -20px 60px #ffffff;
padding: 20px;
}
</style>Componenti correlati
Componente Glassmorphism Loader
Un semplice componente loader in stile glassmorphism con colori complementari, adatto per un portfolio, con supporto per la modalità reattiva e scura.
Caricatore da gioco Memphis
Un caricatore da gioco giocoso e audace ispirato al design Memphis, con colori complementari e forme geometriche per un'atmosfera anni '80. Completamente reattivo e supporta la modalità oscura.
OrganicNatureLoaderComponent
Un componente del caricatore di complessità moderata con un design organico/ispirato alla natura che utilizza una tavolozza di colori retrò/vintage, adatto per il consumo di blog/contenuti. Include la reattività completa e il supporto per la modalità oscura.