Volet Indicateurs de progrès
Un composant d’indicateur de progression avec un style glassmorphism, un design réactif et une prise en charge du thème sombre. Utilise Tailwind CSS pour le coiffage.
HTML Code
<div class="flex items-center justify-center min-h-screen p-6 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-md bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-4">Progress</h2>
<div class="mb-4">
<div class="flex justify-between items-center mb-1">
<span class="text-base font-medium text-gray-700 dark:text-gray-300">Task Completion</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between items-center mb-1">
<span class="text-base font-medium text-gray-700 dark:text-gray-300">Resource Usage</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">50%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div>
<div class="flex justify-between items-center mb-1">
<span class="text-base font-medium text-gray-700 dark:text-gray-300">Download Progress</span>
<span class="text-sm font-medium text-gray-700 dark:text-gray-300">90%</span>
</div>
<div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
<div class="bg-yellow-400 h-2.5 rounded-full" style="width: 90%"></div>
</div>
</div>
</div>
</div>Composants associés
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage utilisant Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Memphis_Gaming_Progress_Indicators
Un composant d’indicateurs de progression complexe et réactif pour les jeux, inspiré du design de Memphis avec une palette de couleurs de coucher de soleil. Comprend plusieurs barres de progression, un affichage de niveau et des éléments interactifs, avec prise en charge du mode sombre.
Volet Indicateurs de progrès
Un composant complexe d’indicateur de progression avec des dégradés de couleurs neutres et froides, des transitions fluides et une progression en plusieurs étapes, adapté aux sites Web gouvernementaux/de services publics. Inclut la prise en charge du mode sombre et est entièrement réactif.