Barre de progression du mode sombre triadique
Un composant de barre de progression simple et triadique pour le mode sombre, adapté aux blogs et à la consommation de contenu. Il dispose d’un design réactif avec Tailwind CSS, utilisant le préfixe dark : pour la prise en charge du thème sombre sans JavaScript.
HTML Code
<div class="dark:bg-gray-900 p-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Reading Progress</h2>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-purple-500 h-2.5 rounded-full" style="width: 45%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-4">
<div class="dark:bg-yellow-500 h-2.5 rounded-full" style="width: 60%;"></div>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="dark:bg-emerald-500 h-2.5 rounded-full" style="width: 75%;"></div>
</div>
</div>Composants associés
Barre de progression terreuse de conception matérielle
Une barre de progression inspirée du Material Design avec des tons de terre, adaptée aux interfaces de médias sociaux. Il est réactif et inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de la barre de progression
Un composant de barre de progression réactif conçu avec des éléments 3D, utilisant une palette de couleurs analogue adaptée au commerce électronique, avec prise en charge du mode sombre
Composant de la barre de progression
Un composant simple de barre de progression stylisé dans un design brutaliste avec une palette de couleurs en niveaux de gris pour les applications de commerce électronique. Il est réactif et prend en charge le mode sombre.