Composant des chargeurs
Un composant Loaders conçu avec un style skeuomorphe utilisant un schéma de couleurs triadique pour un blog ou un site Web axé sur le contenu. Il présente une mise en page simple adaptée à la consommation de contenu, intégrant la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="loader">
<div class="rounded-lg border-4 border-blue-500 dark:border-blue-300 h-16 w-16 animate-spin"></div>
<div class="mt-5 text-center">
<img class="rounded-full h-12 w-12 mx-auto" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" />
<div class="text-lg font-bold text-gray-800 dark:text-gray-200">Loading Content...</div>
</div>
</div>
</div>
<style>
.loader {
background: linear-gradient(145deg, #e6e6e6, #f0f0f0);
border-radius: 15px;
box-shadow: 20px 20px 60px #d1d1d1,
-20px -20px 60px #ffffff;
padding: 20px;
}
</style>Composants associés
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 réactif conçu pour le mode sombre, avec des tons de terre et une complexité modérée pour la présentation du portfolio.
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.