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.
Volet Indicateurs de progrès
Un composant simple d’indicateurs de progression inspiré de l’esthétique rétro/vintage des années 80 et 90, utilisant une palette de couleurs complémentaires. Conçu pour les interfaces de médias sociaux et réactif avec prise en charge du thème sombre.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression réactif avec un style glassmorphism, avec des éléments translucides givrés ressemblant à du verre et des effets de flou, prenant en charge le thème sombre à l’aide de Tailwind CSS.