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

Skeuomorphic_Monochromatic_Progress_Bar

Un componente della barra di avanzamento skeumorfica di complessità moderata per l'e-commerce, con una combinazione di colori monocromatica, piena reattività e supporto per la modalità scura.

Aperto

Barra di avanzamento della modalità oscura

Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, con un design elegante e il supporto per il tema scuro.

Aperto

Componente della barra di avanzamento

Un semplice componente della barra di avanzamento con glassmorphism e colori monocromatici, adatto per siti Web aziendali e aziendali, con supporto per la modalità scura.

Aperto