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.
HTML Code
<div class="w-full max-w-md mx-auto p-4">
<h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
<div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
<div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
</div>
<div class="flex justify-between mt-2">
<span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
<span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
</div>
</div>Composants associés
Barre de progression skeuomorphe
Composant de barre de progression skeuomorphe pour les portfolios, doté d’un schéma de couleurs monochromatique et d’un design complexe et interactif avec prise en charge du mode réactif et sombre à l’aide de Tailwind CSS.
Barre de progression neumorphe
Un composant de barre de progression réactif conçu avec le style Neumorphism, prenant en charge les thèmes clairs et sombres à l’aide de Tailwind CSS.
Barre de progression du neumorphisme
Un composant réactif de barre de progression de style neumorphisme conçu pour les tableaux de bord, intégrant une fonction interactive et prenant en charge le mode sombre.