Indicateurs de progrès Composante 33
Un indicateur de progression réactif avec des micro-interactions dans Tailwind CSS, avec prise en charge du thème sombre.
HTML Code
<div class="relative flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="progress-container flex items-center justify-center">
<div class="progress-bar relative w-64 h-2 bg-gray-300 dark:bg-gray-700 rounded-full overflow-hidden">
<div class="progress-fill w-1/2 h-full bg-blue-500 rounded-full transition-all duration-300 ease-in-out"></div>
</div>
<div class="progress-indicators flex justify-between w-full mt-2">
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/101/50" alt="Avatar 1" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 1</span>
</div>
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/102/50" alt="Avatar 2" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 2</span>
</div>
<div class="indicator flex flex-col items-center">
<img src="https://picsum.photos/id/103/50" alt="Avatar 3" class="mb-1 rounded-full border border-white dark:border-gray-800">
<span class="text-xs text-gray-700 dark:text-gray-300">Step 3</span>
</div>
</div>
</div>
<style>
.progress-fill {
animation: fill 1.5s forwards;
}
@keyframes fill {
from { width: 0%; }
to { width: 50%; }
}
</style>
</div>Composants associés
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.
Volet Indicateurs de progrès
Un composant d’indicateurs de progression de style rétro/vintage avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Volet Indicateurs de progrès
Un indicateur de progression de style neumorphique adapté aux interfaces de médias sociaux, doté d’une mise en page simple et d’un design réactif avec prise en charge du mode sombre.