Componenti Indicatore Componente della barra di avanzamento

Componente della barra di avanzamento

Un semplice componente della barra di avanzamento con un design brutale con una combinazione di colori in scala di grigi per applicazioni di e-commerce. È reattivo e dispone del supporto per la modalità oscura.

Anteprima

Codice HTML

<div class="w-full max-w-md mx-auto p-4">
    <h2 class="text-white text-xl font-bold mb-2">Loading Your Items...</h2>
    <div class="bg-gray-300 dark:bg-gray-700 rounded-full h-6">
        <div class="bg-black dark:bg-white h-6 rounded-full" style="width: 70%;"></div>
    </div>
    <div class="flex justify-between mt-2">
        <span class="text-gray-500 dark:text-gray-300 text-sm">0%</span>
        <span class="text-gray-500 dark:text-gray-300 text-sm">70%</span>
    </div>
</div>

Componenti correlati

Componente della barra di avanzamento

Un componente della barra di avanzamento complesso e reattivo per la pubblica amministrazione/i servizi pubblici, caratterizzato da un design pulito e minimalista con una tavolozza monocromatica e accenti luminosi, supporto per la modalità oscura e informazioni dettagliate sullo stato di avanzamento.

Aperto

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 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.

Aperto