Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato pensando alla modalità scura, utilizzando Tailwind CSS.
Codice HTML
<div class="flex items-center justify-center h-screen bg-gray-900">
<div class="w-full max-w-md">
<h2 class="text-white text-lg font-semibold mb-4">Progress Bar</h2>
<div class="relative pt-1">
<div class="flex items-center justify-between mb-2">
<span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-teal-600 bg-teal-200">
70%
</span>
<span class="text-xs font-semibold inline-block text-gray-400">
7/10
</span>
</div>
<div class="h-2 bg-gray-700 rounded">
<div class="h-full bg-teal-500 rounded" style="width: 70%;"></div>
</div>
</div>
<p class="text-gray-400 text-sm mt-2">Loading...</p>
</div>
</div>Componenti correlati
Barra di avanzamento professionale per l'e-commerce
Un componente della barra di avanzamento complesso e reattivo progettato per l'e-commerce, con una combinazione di colori autunnali (arancioni, marroni, bordeaux) e che supporta la modalità scura. Fornisce un aspetto pulito e professionale per gli ambienti aziendali.
Barra di avanzamento del fitness sportivo in scala di grigi 3D
Un complesso componente della barra di avanzamento in scala di grigi 3D progettato per applicazioni sportive e di fitness, che mostra i progressi dell'allenamento con profondità e coinvolgimento visivo. Include il supporto per la modalità oscura ed è completamente reattivo.
Barra di avanzamento della modalità oscura triadica
Un componente della barra di avanzamento semplice e triadicato per la modalità scura, adatto per blog e consumo di contenuti. Presenta un design reattivo con Tailwind CSS, utilizzando il prefisso dark: per il supporto del tema scuro senza JavaScript.