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.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
<h1 class="text-2xl font-bold mb-8 text-gray-800 dark:text-white">Loading...</h1>
<div class="flex items-center justify-center space-x-4">
<div class="loader w-16 h-16 border-4 border-blue-500 rounded-full border-t-transparent animate-spin"></div>
<div class="loader w-16 h-16 border-4 border-green-500 rounded-full border-t-transparent animate-spin"></div>
<div class="loader w-16 h-16 border-4 border-red-500 rounded-full border-t-transparent animate-spin"></div>
</div>
<div class="mt-8">
<img class="w-24 h-24 rounded-full shadow-lg" src="https://picsum.photos/100/100" alt="Random Image" />
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">This is an example of a loading component with material design.</div>
</div>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
.loader {
@apply animate-spin;
}
@media (prefers-color-scheme: dark) {
/* Dark mode styles */
.loader {
filter: brightness(1.2);
}
}
</style>
Composants associés
Composant des chargeurs
Un composant de chargement complexe, réactif, de style Glassmorphism pour le commerce électronique, avec une palette de couleurs triadique et une prise en charge du mode sombre, utilisant HTML et Tailwind CSS.
Brutalist_Music_Loader
Un composant de chargement d’inspiration brutaliste pour les plates-formes musicales/audio, avec des tons violet/violet très contrastés et un design réactif avec prise en charge du mode sombre. Simule un état de chargement « vague musicale » ou « lecture ».
Chargeur en mode sombre
Loader ou Skeleton Component pour les interfaces en mode sombre, avec des fonctionnalités réactives. Pas besoin de Javascript.