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 Loaders conçu dans un style brutaliste avec un accent sur l’interactivité pour les sites Web d’entreprise/d’entreprise, avec une palette de couleurs analogue et un design réactif avec prise en charge du mode sombre. Le design présente différentes animations de chargeur qui capturent l’esthétique audacieuse et brute du brutalisme.
Composant des chargeurs
Un composant de chargeur réactif avec prise en charge du mode sombre.