Caricatore Neumorfico
Un semplice componente di caricamento neumorfico per siti di e-commerce con supporto per la modalità scura.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="w-64 h-64">
<div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>
<div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
<div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
</div>
</div>
</div>
</div>
<style>
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.animate-spin {
animation: spin 1s linear infinite;
}
.shadow-neumorphic-light {
box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>Componenti correlati
Componenti caricatori
Un componente Loader progettato in stile brutalista con particolare attenzione all'interattività per siti Web aziendali/aziendali, caratterizzato da una combinazione di colori analoga e un design reattivo con supporto per la modalità scura. Il design mostra diverse animazioni del caricatore che catturano l'estetica audace e cruda del brutalismo.
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 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.