Styling del bar del progresso in bootstrap 5

Il significato di una barra di avanzamento può essere sottolineato dal fatto che mantiene il tuo utente impegnato e informato sullo stato di avanzamento di un processo come quando si compila una forma lunga che ha diversi passaggi o quando si carica una pagina o un'altra fonte. Qui in questo blog abbiamo riassunto per voi modi in cui puoi modellare le barre di avanzamento usando bootstrap 5. Ma prima di saltare al suo stile, impariamo a crearne uno.

Come creare una barra di avanzamento

Allo scopo di generare una barra di avanzamento, impostare il .progresso Classe per l'elemento predecessore nel frattempo, dai .barra di avanzamento all'elemento successore, mentre la larghezza della barra di avanzamento viene regolata utilizzando la proprietà di larghezza.

Html

Il Parent Div è stato fornito il .Classe di progresso mentre il bambino Div è stato dato il .Classe di barre di avanzamento. Infine, usando la proprietà di larghezza la larghezza della barra di avanzamento è stata impostata al 50%.

Produzione

Una barra di avanzamento è stata generata con successo.

Ora apprendiamo vari modi in cui puoi modellare una barra di progresso.

Come ridimensionare una barra di avanzamento

Per impostazione predefinita, una barra di avanzamento ha un'altezza 16px o 1rem ma a seconda della preferenza è possibile scalare l'altezza della barra di avanzamento su e giù. A tale scopo, fissare la stessa altezza per il Div predecessore e il Div successore.

Html

Il codice sopra genererà due barre di avanzamento, una con un'altezza 20px e la seconda con altezza 40px. Si noti che il container di avanzamento e la barra di avanzamento sono stati assegnati la stessa altezza in entrambi i casi.

Produzione

L'output mostra due barre di avanzamento con altezze diverse.

Come etichettare una barra di avanzamento

Dal momento che sappiamo una barra di avanzamento mostra l'avanzamento di un processo, quindi, se si desidera mostrare questo progresso nei numeri o percentuali, semplicemente scrivi un testo all'interno del bambino div.

Html

50%

La barra di avanzamento creata nel codice sopra ha un'etichetta che dice "50%". Questa etichetta corrisponde all'avanzamento del processo.

Produzione

Un'etichetta è stata assegnata correttamente alla barra di avanzamento.

Come colorare una barra di progresso

Se si desidera fornire i colori a una barra di avanzamento, assegnare semplicemente le classi di colore di sfondo al contenitore della barra di avanzamento. Le classi di colore di sfondo sono .BG-PRIMARY, .BG-SUCCESS, .BG-Secondary, .BG-Info, .BG-Warning, .BG-Danger, .BG-Light, .bg-dark, .bg-mutata.

Html

Qui stiamo creando cinque barre di avanzamento ciascuna con una larghezza e un colore diverso.

Produzione

Fornire colori alle barre di avanzamento si sommerà alla bellezza del sito Web.

Come creare una barra di avanzamento a strisce

Un'altra cosa divertente che puoi fare per modellare una barra di avanzamento è renderlo a strisce e per farlo assegnare il .a strisce di progresso Classe per il contenitore figlio.

Html

Il codice sopra genere genererà una barra di avanzamento a strisce con larghezza del 50%.

Produzione

Ecco come viene creata una barra di avanzamento a strisce.

Come animare una barra di progresso

L'animazione di una barra di avanzamento farà muovere i progressi all'interno della barra. Questo può essere fatto fornendo il .Progress-bar-Animato classe per la barra di progresso insieme al .a strisce di progresso classe.

Html

Qui stiamo creando una barra di avanzamento animata a strisce con larghezza del 50%.

Produzione

È stata creata una barra di avanzamento animata.

Come impilare più barre di avanzamento

Se desideri impilare più barre di avanzamento insieme, mettile semplicemente all'interno del container di avanzamento.

Html

Primo
Secondo
Terzo

Il codice sopra si accumulerà tre barre di avanzamento ciascuna con una larghezza diversa.

Produzione

L'output sopra mostra tre barre di avanzamento impilate.

Conclusione

In Bootstrap 5, può essere creata una barra di avanzamento assegnando .progresso classe al contenitore principale e .barra di avanzamento Classe per il contenitore figlio. Si ridimensiona l'altezza di una barra di avanzamento assegnando la stessa altezza ai contenitori genitore e figlio. Una barra di avanzamento può essere etichettata posizionando un po 'di testo al suo interno, inoltre, per creare barre di avanzamento colorate usando le classi di colore di sfondo. Inoltre, è possibile creare barre di avanzamento a strisce e animate usando il .a strisce di progresso, E .Progress-bar-Animato lezioni rispettivamente.