Caricatore di neumorfismo
Componente Loader con stile Neumorfismo e combinazione di colori pastello per E-commerce. Complessità semplice, reattiva con supporto per la modalità oscura. Niente JavaScript.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
<div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
Loading...
</div>
</div>
</div>
<style>
.loader {
animation: spin 2s linear infinite;
box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dark .loader {
box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
}
</style>Componenti correlati
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.
Componenti caricatori
Un semplice componente di caricamento progettato per le interfacce dei social media in modalità oscura che utilizzano una combinazione di colori monocromatica.
Caricatore Neumorfico
Un semplice componente di caricamento neumorfico per siti di e-commerce con supporto per la modalità scura.