Chargeur de neumorphisme
Un composant de chargeur de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre utilisant Tailwind CSS. Aucun JavaScript n’est nécessaire. Utilise des ombres subtiles pour créer un effet extrudé à partir de l’arrière-plan. Mode sombre pris en charge avec CSS.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="w-32 h-32 relative">
<div class="absolute inset-0 bg-gray-300 dark:bg-gray-700 rounded-full neumorphic-shadow dark:neumorphic-shadow-dark animate-ping"></div>
<div class="absolute inset-0 flex items-center justify-center text-gray-600 dark:text-gray-300">
Loading...
</div>
</div>
</div>
<style>
.neumorphic-shadow {
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-shadow-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #555555;
}
@keyframes ping {
0% {
transform: scale(0.8);
opacity: 1;
}
75%, 100% {
transform: scale(2);
opacity: 0;
}
}
</style>Composants associés
Cône de chargement en niveaux de gris
Un composant de spinner de chargement simple avec des couleurs en niveaux de gris et un focus de micro-interaction.
Composant de chargement Glassmorphism
Un composant de chargeur simple, de style glassmorphism, avec des couleurs complémentaires, adapté à un portefeuille, avec une prise en charge réactive et en mode sombre.
Composant des chargeurs
Un composant de chargement complexe, réactif, de style Glassmorphism pour le commerce électronique, avec une palette de couleurs triadique et une prise en charge du mode sombre, utilisant HTML et Tailwind CSS.