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 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.
Composant Indicateurs de Progression Glassmorphism
Indicateur de progression Glassmorphism Composant avec palette de couleurs vives et complexité simple.
Composant de la barre de progression 3D
Style avec des effets 3D, Tailwind CSS, un design réactif et la prise en charge du mode sombre.