Composant des chargeurs neumorphes
Un composant de chargeurs neumorphes avec une palette de couleurs analogue, adapté à un blog ou à un site de contenu, doté d’un design réactif et d’une prise en charge du thème sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
<!-- Neumorphic Loader 1 -->
<div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
<div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-blue-500 dark:border-blue-700 animate-spin"></div>
</div>
<!-- Neumorphic Loader 2 -->
<div class="relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center">
<div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-green-500 dark:border-green-700 animate-pulse"></div>
</div>
<!-- Neumorphic Loader 3 (for larger screens with subtle animation) -->
<div class="hidden md:flex relative w-24 h-24 m-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark items-center justify-center">
<div class="absolute w-16 h-16 rounded-full border-4 border-t-4 border-purple-500 dark:border-purple-700 animate-bounce-slow"></div>
</div>
</div>
<!-- Add a style block for the custom animation, as Tailwind doesn't have a direct "bounce-slow" -->
<style>
@keyframes bounce-slow {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.animate-bounce-slow {
animation: bounce-slow 2s infinite ease-in-out;
}
/* Neumorphism Shadows */
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
}
</style>Composants associés
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.
Organic_Nature_Loader_Real_Estate
Un composant de chargement simple, organique et inspiré de la nature pour les plateformes immobilières, avec des lignes fluides et des couleurs vives à haute saturation avec une réactivité totale et une prise en charge du mode sombre.
NeonGlowWeatherLoader
Un composant simple et réactif avec des effets de néon, une base en noir et blanc et une couleur d’accentuation vibrante, y compris la prise en charge du mode sombre.