Composant des chargeurs
Un composant de chargeur simple conçu dans le style Neumorphism pour la consommation de contenu avec un schéma de couleurs complémentaire.
HTML Code
<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>Composants associés
Composant des chargeurs
Un composant Loaders conçu avec un style skeuomorphe utilisant un schéma de couleurs triadique pour un blog ou un site Web axé sur le contenu. Il présente une mise en page simple adaptée à la consommation de contenu, intégrant la prise en charge du mode sombre.
MinimalisteNiveaux de GrisLoader
Design minimaliste/plat, palette de couleurs en niveaux de gris, composant de chargement de complexité modérée pour les sites Web d’entreprise/d’entreprise avec un design réactif et une prise en charge du thème sombre.
Composant des chargeurs
Un composant Loaders réactif conçu pour le mode sombre, avec des tons de terre et une complexité modérée pour la présentation du portfolio.