Componenti Indicatore Componente della barra di avanzamento

Componente della barra di avanzamento

Un componente della barra di avanzamento reattivo progettato per la modalità oscura utilizzando Tailwind CSS, adatto per le moderne applicazioni web.

Anteprima

Codice HTML

<div class="flex items-center justify-center h-screen bg-gray-900 p-4">
    <div class="w-full max-w-md">
        <h2 class="text-white text-lg font-semibold mb-2">Upload Progress</h2>
        <div class="relative bg-gray-700 rounded-full h-4">
            <div class="bg-green-500 rounded-full h-full" style="width: 60%;"></div>
        </div>
        <div class="flex justify-between text-xs text-gray-400 mt-1">
            <span>0%</span>
            <span>60%</span>
            <span>100%</span>
        </div>
    </div>
</div>

Componenti correlati

Material Design Barra di avanzamento terrosa

Una barra di avanzamento ispirata al Material Design con toni della terra, adatta per le interfacce dei social media. È reattivo e include il supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto

Barra di avanzamento del neumorfismo

Componente della barra di avanzamento con design del neumorfismo, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS

Aperto

Componente della barra di avanzamento

Un componente della barra di avanzamento reattivo progettato con elementi 3D, utilizzando una combinazione di colori analoga adatta all'e-commerce, con supporto per la modalità oscura

Aperto