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
Composant des chargeurs
Un composant Loaders conçu dans le style Material Design avec des effets réactifs et une prise en charge du thème sombre à l’aide de Tailwind CSS.
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.