Volet Indicateurs de progrès
Il s’agit d’un composant d’indicateur de progression de style Material Design utilisant Tailwind CSS, avec des effets réactifs et la prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-800 p-4">
<!-- Linear Progress Bar -->
<div class="w-64 h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
<div class="h-full bg-blue-500 dark:bg-blue-400 w-3/4 rounded-full animate-pulse"></div>
</div>
<!-- Spacer -->
<div class="my-8"></div>
<!-- Circular Progress Indicator -->
<div class="relative">
<div class="w-16 h-16 border-4 border-blue-500 dark:border-blue-400 border-t-transparent border-solid rounded-full animate-spin shadow-md"></div>
<div class="absolute top-0 left-0 w-16 h-16 flex items-center justify-center text-blue-700 dark:text-blue-300 font-bold">
75%
</div>
</div>
<!-- Spacer -->
<div class="my-8"></div>
<!-- Linear Progress Bar with Label -->
<div class="w-64">
<div class="flex justify-between mb-1 text-gray-700 dark:text-gray-300">
<span class="text-base font-medium">Progress</span>
<span class="text-sm font-medium">45%</span>
</div>
<div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden shadow-md">
<div class="h-full bg-green-500 dark:bg-green-400 w-[45%] rounded-full" style="width: 45%;"></div>
</div>
</div>
</div>Composants associés
Composant Indicateurs de Progression Glassmorphism
Indicateur de progression Glassmorphism Composant avec palette de couleurs vives et complexité simple.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression inspiré de Material Design avec des effets réactifs et la prise en charge du thème sombre, construit à l’aide de Tailwind CSS.
BrutalisteNiveaux de grisProgressBar
Une barre de progression en niveaux de gris de style brutaliste pour le contenu du blog, avec un design simple, une prise en charge du mode sombre et une réactivité.