Componenti caricatori
Un semplice componente loader progettato in stile Neumorfismo per il consumo di contenuti con una combinazione di colori complementari.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
<div class="bg-white dark:bg-gray-700 shadow-neumorphism rounded-lg p-6 w-80">
<div class="animate-pulse">
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-3/4 mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-full mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-5/6 mb-4"></div>
<div class="h-4 bg-gray-300 dark:bg-gray-600 rounded w-4/5"></div>
</div>
</div>
<div class="mt-8 flex flex-col items-center">
<img src="https://picsum.photos/100" class="rounded-full shadow-neumorphism" alt="Random image cat">
<div class="mt-2 font-semibold text-lg text-gray-800 dark:text-gray-200">Loading...</div>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 8px 8px 16px rgba(0,0,0,0.2),
-8px -8px 16px rgba(255, 255, 255, 0.7);
}
</style>Componenti correlati
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 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.