Composant des chargeurs
Un composant de chargeurs 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.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader-container grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-blue-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-green-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-red-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-yellow-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-purple-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
<div class="loader bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition duration-300 ease-in-out">
<div class="animate-bounce w-20 h-20 bg-pink-500 rounded-full mx-auto mb-4"></div>
<p class="text-center text-gray-700 dark:text-gray-300">Loading...</p>
</div>
</div>
</div>Composants associés
Composant des chargeurs
Un composant Loaders réactif conçu pour le mode sombre, avec des tons de terre et une complexité modérée pour la présentation du portfolio.
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 des chargeurs
Un composant de chargeur simple conçu dans le style Neumorphism pour la consommation de contenu avec un schéma de couleurs complémentaire.