Indicatori di progresso Componente 33
Un indicatore di avanzamento reattivo con microinterazioni in Tailwind CSS, con supporto per il tema scuro.
Codice HTML
<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>Componenti correlati
Componente Indicatori di progresso
Un componente degli indicatori di progresso in stile retrò/vintage che utilizza Tailwind CSS con effetti reattivi e supporto per temi scuri.
Componente Indicatori di progresso
Un componente indicatore di stato in stile glassmorphism per applicazioni di social media, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura. Utilizza una combinazione di colori analoga e offre un'interfaccia complessa e ricca con più elementi interattivi. Il componente è reattivo e supporta un tema scuro con Tailwind CSS.
Componente Indicatori di progresso
Un componente indicatore di stato con uno stile glassmorphism, un design reattivo e il supporto per i temi scuri. Utilizza Tailwind CSS per lo stile.