Chargeur de neumorphisme
Composant de chargeur avec style Neumorphisme et palette de couleurs pastel pour le commerce électronique. Complexité simple, réactif avec prise en charge du mode sombre. Pas de JavaScript.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<div class="loader ease-linear rounded-full border-8 border-t-8 border-gray-200 dark:border-gray-700 h-32 w-32 relative" style="border-top-color: #a78bfa;">
<div class="absolute inset-0 flex items-center justify-center text-gray-500 dark:text-gray-400 text-2xl">
Loading...
</div>
</div>
</div>
<style>
.loader {
animation: spin 2s linear infinite;
box-shadow: 8px 8px 16px #a7a7a7, -8px -8px 16px #ffffff; /* Neumorphism effect */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.dark .loader {
box-shadow: 8px 8px 16px #4b5563, -8px -8px 16px #1f2937; /* Neumorphism effect for dark mode */
}
</style>Composants associés
Chargeur neumorphe
Un composant de chargement Neumorphic simple pour les sites de commerce électronique avec prise en charge du mode sombre.
Composant des chargeurs
Un composant Loaders conçu en 3D présentant des animations de chargement avec de la profondeur et de l’engagement, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant des chargeurs
Un composant de chargeurs conçu sur la base des principes de conception matérielle avec prise en charge CSS Tailwind pour le mode sombre et les effets réactifs.