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
Composant des chargeurs
Un composant Loaders conçu en 3D présentant des animations de chargement avec de la profondeur et de l’engagement, des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
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.