Barra di avanzamento triadica minimalista
Una barra di avanzamento minimalista e reattiva con combinazione di colori triadica e supporto per temi scuri, adatta per applicazioni di social media.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<!-- Progress Bar Container -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 mb-4 relative">
<!-- Progress Indicator - Using an arbitrary value with [] for demonstration -->
<div class="bg-fuchsia-500 dark:bg-fuchsia-400 h-4 rounded-full" style="width: 75%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">75%</span>
</div>
</div>
<!-- Another Progress Bar Example -->
<div class="w-full max-w-md bg-cyan-200 dark:bg-cyan-800 rounded-full h-4 relative">
<div class="bg-yellow-500 dark:bg-yellow-400 h-4 rounded-full" style="width: 50%;">
<span class="absolute right-2 top-0 text-xs font-semibold text-gray-700 dark:text-gray-300">50%</span>
</div>
</div>
</div>
Componenti correlati
Indicatore
Componente della barra di avanzamento con progettazione di microinterazioni. Include effetti reattivi e supporto per temi scuri utilizzando solo HTML e CSS (Tailwind CSS).
Organic_Nature_ProgressBar
Un componente della barra di avanzamento ispirato alla natura e a tema retrò per applicazioni industriali e manifatturiere, con linee fluide, colori tenui e supporto per la modalità scura.
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato per la modalità scura con una combinazione di colori pastello, adatto per siti Web aziendali/aziendali.