Composant de la barre de progression
Un composant de barre de progression réactif conçu pour le mode sombre, à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
<span class="text-xs font-semibold inline-block text-gray-400">
7/10
</span>
</div>
<div class="h-2 bg-gray-700 rounded">
<div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
</div>
</div>
<p class="text-gray-400 text-sm mt-2">Loading...</p>
</div>
</div>Composants associés
ProgressBarComponent
Un composant de barre de progression simple, propre et réactif avec des couleurs néon/électriques pour les sites Web d’alimentation/restaurants, avec prise en charge du mode sombre et conception typographique suisse/internationale.
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.
Barre de progression Glassmorphism
Barre de progression de style Glassmorphism conçue pour les interfaces de médias sociaux, avec des couleurs vives et la prise en charge du mode sombre. Mise en page simple sans JavaScript.