Composant de la barre de progression
Un composant simple de barre de progression stylisé avec un morphisme de verre et des couleurs monochromes, adapté aux sites Web d’entreprise et d’entreprise, avec prise en charge du mode sombre.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 bg-opacity-30 backdrop-blur-md border border-gray-500 rounded-lg p-6 shadow-lg w-1/2">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Progress</h2>
<div class="relative w-full h-4 rounded-full bg-gray-300 dark:bg-gray-600">
<div class="absolute top-0 left-0 h-4 rounded-full bg-blue-500" style="width: 70%;"></div>
</div>
<span class="text-base text-gray-800 dark:text-gray-200 mt-2">70%</span>
</div>
</div>Composants associés
Composant de la barre de progression
Un composant de barre de progression simple et réactif avec l’influence du Material Design, utilisant des tons chauds de coucher de soleil. Idéal pour les applications technologiques/SaaS, avec prise en charge du mode sombre.
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.
Industrial_Travel_Progress_Bar
Un composant simple de barre de progression de style industriel pour les sites Web de voyage/tourisme, avec une palette de couleurs violet/violet et une réactivité totale avec prise en charge du mode sombre.