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 jeu Memphis
Un chargeur de jeu ludique et audacieux inspiré du design de Memphis, avec des couleurs complémentaires et des formes géométriques pour une ambiance des années 80. Entièrement réactif et prend en charge le mode sombre.
Composant des chargeurs
Un composant de chargeur en mode sombre simple avec une palette de couleurs complémentaire.
Composant des chargeurs
Un composant de chargeur simple conçu dans le style Neumorphism pour la consommation de contenu avec un schéma de couleurs complémentaire.