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 de chargeur skeuomorphe
Un composant de chargement professionnel et réactif avec un design skeuomorphe, une palette de couleurs complémentaire et une prise en charge du mode sombre, adapté aux sites Web d’entreprise. Comprend une barre de chargement subtile et animée à l’intérieur d’un conteneur métallique.
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.
Industrial_Rainbow_Healthcare_Loader
Un composant de chargeur de style industriel pour les applications de santé, avec des éléments bruts, un dégradé arc-en-ciel multicolore et une réactivité totale avec prise en charge du mode sombre. Utilise des animations CSS simples pour l’effet de chargement.