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
Organic_Nature_Loader_Real_Estate
Un componente di caricamento semplice, organico e ispirato alla natura per le piattaforme immobiliari, caratterizzato da linee fluide e colori vivaci e ad alta saturazione con piena reattività e supporto per la modalità oscura.
NeonGlowWeatherLoader
Un componente di caricamento meteo/clima semplice e reattivo con effetti di bagliore al neon, una base in bianco e nero e un colore d'accento vibrante, incluso il supporto della modalità scura.
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.