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
Componente della barra di avanzamento
Un componente della barra di avanzamento reattivo progettato in stile Material Design, che incorpora combinazioni di colori pastello per le vetrine del portfolio. Supporta la modalità oscura.
Barra di avanzamento del Glassmorphism
Barra di avanzamento in stile Glassmorphism progettata per le interfacce dei social media, con colori vivaci e supporto per la modalità scura. Layout semplice senza JavaScript.
Componente Barra di avanzamento 3D
Un componente della barra di avanzamento reattivo progettato per le interfacce di social networking, con un effetto 3D, una combinazione di colori monocromatica e il supporto della modalità scura, creato utilizzando Tailwind CSS.