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
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 ».
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 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.