Componente Indicatori di progresso
Un componente reattivo degli indicatori di avanzamento con stile glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti di sfocatura, che supporta il tema scuro utilizzando Tailwind CSS.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-gray-100 dark:bg-gray-900">
<div class="bg-white bg-opacity-20 backdrop-blur-lg border border-white border-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-center text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Progress Indicators</h2>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 1</span>
<span class="text-sm text-gray-700 dark:text-gray-300">75%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 75%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 2</span>
<span class="text-sm text-gray-700 dark:text-gray-300">50%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-green-600 h-2.5 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="w-full mb-4">
<div class="flex justify-between mb-1">
<span class="text-sm text-gray-700 dark:text-gray-300">Task 3</span>
<span class="text-sm text-gray-700 dark:text-gray-300">25%</span>
</div>
<div class="bg-gray-300 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 25%"></div>
</div>
</div>
<div class="flex items-center justify-between mt-4">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full">
</div>
</div>
</div>Componenti correlati
Componente Indicatori di progresso
Un semplice componente Progress Indicators ispirato all'estetica retrò/vintage degli anni '80 e '90, che utilizza una combinazione di colori complementari. Progettato per le interfacce dei social media e reattivo con supporto per il tema scuro.
Componente Indicatori di progresso
Indicatori di avanzamento ispirati a carta/stampa per un marketplace, con colori dolci/caramelle. Design complesso con più passaggi, layout reattivo e supporto per la modalità scura.
Playful_Job_Application_Progress_Indicator
Un componente complesso, giocoso e reattivo per i flussi di lavoro delle domande di lavoro, con una combinazione di colori caramelle/dolci e il supporto della modalità scura. Progettato per bacheche di lavoro e piattaforme di sviluppo della carriera, rappresenta visivamente più fasi di candidatura con transizioni animate e messaggi incoraggianti.