Componenti Indicatore Componente della barra di avanzamento della modalità scura

Componente della barra di avanzamento della modalità scura

Un componente reattivo della barra di avanzamento in modalità oscura per siti Web aziendali/aziendali, che utilizza colori vivaci ed elementi interattivi.

Anteprima

Codice HTML

<div class="p-6 max-w-md mx-auto bg-gray-800 rounded-xl shadow-md space-y-4">
    <h2 class="text-2xl font-bold text-white text-center">Progress Tracker</h2>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 1</span>
        <span class="text-sm text-gray-400">75%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-green-500 h-4 rounded-full" style="width: 75%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 2</span>
        <span class="text-sm text-gray-400">50%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-yellow-500 h-4 rounded-full" style="width: 50%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 3</span>
        <span class="text-sm text-gray-400">30%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-red-500 h-4 rounded-full" style="width: 30%;"></div>
    </div>
    <div class="flex justify-between items-center">
        <span class="text-sm text-gray-400">Task 4</span>
        <span class="text-sm text-gray-400">10%</span>
    </div>
    <div class="w-full bg-gray-700 rounded-full h-4">
        <div class="bg-blue-500 h-4 rounded-full" style="width: 10%;"></div>
    </div>
</div>

Componenti correlati

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.

Aperto

Barra di avanzamento del neumorfismo

Una barra di avanzamento in stile neumorfismo per i portfolio, con una combinazione di colori pastello, complessità moderata, reattività e supporto per temi scuri. Non è incluso alcun JavaScript; il componente è costruito con HTML e Tailwind CSS.

Aperto

Barra di avanzamento del neumorfismo

Un componente della barra di avanzamento in stile neumorfismo reattivo progettato per i dashboard, che incorpora una funzione interattiva e supporta la modalità oscura.

Aperto