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 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.
Composant des chargeurs
Un composant de chargement de conception matérielle réactif avec une palette de couleurs triadiques, adapté à un portefeuille, avec prise en charge du thème sombre et de multiples éléments interactifs.
Neon_Glow_Autumn_Loader
Un composant de chargeur modérément complexe avec des effets de néon/lueur et des couleurs d’automne, adapté aux systèmes de réservation et de réservation. Dispose d’un design réactif et d’une prise en charge du mode sombre.