Composant des chargeurs
Un composant de chargeur simple conçu pour les interfaces de médias sociaux en mode sombre à l’aide d’un schéma de couleurs monochromatique.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-900 dark:bg-gray-800">
<div class="flex">
<div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce mr-4"></div>
<div class="loader bg-gray-600 dark:bg-gray-400 rounded-full w-16 h-16 animate-bounce"></div>
</div>
<div class="flex flex-col items-center ml-4">
<h2 class="text-gray-200 dark:text-gray-100 text-xl mb-2">Loading...</h2>
<div class="flex space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600 dark:border-gray-400">
</div>
</div>
</div>
<style>
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-15px);
}
}
</style>Composants associés
Chargeur de neumorphisme
Composant de chargeur avec style Neumorphisme et palette de couleurs pastel pour le commerce électronique. Complexité simple, réactif avec prise en charge du mode sombre. Pas de JavaScript.
Composant des chargeurs
Un composant Loaders 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.
Chargeur de neumorphisme
Un composant de chargeur Neumorphism simple avec une palette de couleurs monochromatique pour un portfolio, avec un design réactif et une prise en charge du thème sombre.