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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-6">Loading...</h2>
<div class="flex space-x-4">
<div class="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-green-500 to-teal-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
<div class="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-full animate-ping shadow-lg transform transition-transform duration-500 hover:scale-110"></div>
</div>
<div class="mt-8 flex flex-col items-center">
<img src="https://picsum.photos/100/100?random=1" alt="Loading Image" class="rounded-full border-4 border-white dark:border-gray-800 shadow-lg">
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Loading user profile...</p>
</div>
</div>Composants associés
Composant des chargeurs
Un composant Loaders de style Material Design avec un design réactif pour présenter du travail ou des produits, avec un thème sombre et utilisant Tailwind CSS.
Chargeur en mode sombre
Loader ou Skeleton Component pour les interfaces en mode sombre, avec des fonctionnalités réactives. Pas besoin de Javascript.
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.