Barre de progression triadique minimaliste
Une barre de progression minimaliste et réactive avec une palette de couleurs triadique et une prise en charge du thème sombre, adaptée aux applications de médias sociaux.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<!-- Progress Bar Container -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
<!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
<div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
</div>
</div>
<!-- Another Progress Bar Example -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
<div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
</div>
</div>
</div>
Composants associés
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.
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
Luxury_Grayscale_Social_Media_Progress_Bar
Un composant de barre de progression complexe, élégant et réactif pour les interfaces de médias sociaux, doté d’un design luxueux en niveaux de gris avec une typographie sophistiquée et une prise en charge du mode sombre.