TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come creare barre di avanzamento Bootstrap 5?

2

Le barre di avanzamento vengono utilizzate per mostrare le competenze, la percentuale di completamento dei progetti e per scopi simili. Bootstrap 5 ha diversi stili di barre di avanzamento simili alle versioni precedenti. In questo tutorial esploriamo di più su ogni tipo di barra di avanzamento offerta in Bootstrap 5.

Tutorial sulle barre di avanzamento di Bootstrap 5

  1. Barre di avanzamento HTML5
  2. Barre di avanzamento Bootstrap Classi CSS
  3. Creazione di barre di avanzamento predefinite
  4. Barre di avanzamento con diversi colori di sfondo
  5. Aggiunta di etichette nelle barre di avanzamento
  6. Più barre di avanzamento
  7. Stile a righe
  8. Stile a strisce animato
  9. Regolazione dell’altezza

Cerchiamo di discutere ogni argomento in dettaglio.

1 barre di avanzamento HTML5

Ricorda che HTML5 ha un tag predefinito per creare barre di avanzamento orizzontali che è sufficiente nella maggior parte dei casi. Di seguito è riportato il blocco di codice delle barre di avanzamento HTML5.

<progress value="50" max="100">50 %</progress><br /> <progress value="60" max="100">60 %</progress><br /> <progress value="70" max="100">70 %</progress><br /> <progress value="80" max="100">80 %</progress><br />

Apparirà come di seguito sul browser:

50%

60%

70%

80%

Bootstrap non utilizza la barra di avanzamento HTML5 e ha il proprio stile per il componente della barra di avanzamento.

2 classi CSS utilizzate nelle barre di avanzamento di Bootstrap

Bootstrap 4 utilizza le seguenti classi CSS per creare barre di avanzamento:

  • La classe ".progress" viene utilizzata per il wrapper esterno per la barra di avanzamento. Viene utilizzata per contenere più barre di avanzamento all’interno del wrapper.
  • La classe ".progress-bar" viene utilizzata per creare una barra di avanzamento effettiva per mostrare la percentuale di avanzamento.
  • La larghezza di ciascuna barra di avanzamento dovrebbe essere definita in modo esplicito con classi CSS aggiuntive.
  • Inoltre puoi aggiungere gli attributi "ruolo" e "aria" alla barra di avanzamento per motivi di leggibilità.
  • “aria-valuenow" è usato per indicare il valore di avanzamento corrente, “aria-valuemin” è il valore minimo che è 0 e “aria-valuemax” è il valore massimo che è 100.

Creiamo alcuni esempi utilizzando queste classi.

3 barre di avanzamento predefinite

La barra di avanzamento predefinita utilizza il colore primario per mostrare l’avanzamento e il grigio chiaro per lo sfondo. Di seguito è riportato il codice per la creazione di cinque barre di avanzamento con avanzamento 0, 25, 50, 75 e 100%.

<div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div> </div>

Apparirà come di seguito sul browser:

Come accennato in precedenza, ogni barra di avanzamento dovrebbe avere una larghezza definita in modo esplicito per mostrare il completamento. È possibile utilizzare lo stile in linea o le classi di utilità per questo scopo. Abbiamo utilizzato le classi di dimensionamento delle utenze per 25%, 50% e 75% rispettivamente con w-25, w-50 e w-75. Per la larghezza del 100%, abbiamo utilizzato lo stile in linea con "larghezza: 100%".

Ricorda inoltre di aggiungere un’interruzione di riga manuale tra le barre di avanzamento per evitare che tutte le barre vengano visualizzate sulla stessa riga.

4 barre di avanzamento con sfondi

Simile a molti altri componenti, puoi semplicemente usare le classi di utilità dello sfondo per cambiare lo sfondo in successo, avviso, informazioni, pericolo, colori scuri o secondari.

<div class="progress"> <div class="progress-bar w-25 bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-50 bg-success" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar w-75 bg-info" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div> <div class="progress"> <div class="progress-bar bg-warning" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="80"></div> </div> <div class="progress"> <div class="progress-bar bg-dark" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="90"></div> </div> <div class="progress"> <div class="progress-bar bg-secondary" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="60"></div> </div>

Le barre di avanzamento appariranno come di seguito:

Come creare barre di avanzamento Bootstrap 5?

Nota che il colore primario è il valore predefinito, quindi non è necessario menzionare se vuoi che i progressi siano nel colore primario. Inoltre, non è possibile utilizzare un colore di sfondo chiaro poiché anche lo sfondo della barra di avanzamento è di colore chiaro.

È possibile utilizzare le classi di utilità in background sul wrapper di avanzamento esterno per modificare lo sfondo della barra di avanzamento. Ad esempio, il codice seguente produrrà la barra di avanzamento con uno sfondo di colore rosso (pericolo) anziché grigio chiaro.

<div class="progress bg-danger"> <div class="progress-bar w-25" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> </div>

Il risultato apparirà come di seguito sul browser:

Come creare barre di avanzamento Bootstrap 5?

5 barre di avanzamento con etichette

Se vuoi aggiungere le etichette alla barra di avanzamento, aggiungi semplicemente il testo prima della chiusura

tag di ogni barra di avanzamento. Di seguito è riportato un esempio per mostrare il completamento del 75%:

<div class="progress"> <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">75% Completed</div> </div>

L’etichetta verrà mostrata sopra la barra con l’allineamento centrale come di seguito:

Come creare barre di avanzamento Bootstrap 5?

6 barre di avanzamento multiple

L’aggiunta di più barre di avanzamento all’interno di un singolo involucro esterno creerà tutte le barre in un’unica riga.

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> <div class="progress-bar bg-success" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> <div class="progress-bar bg-warning" role="progressbar" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100">30%</div> </div>

Le barre di avanzamento multiple appariranno come di seguito:

Come creare barre di avanzamento Bootstrap 5?

7 barre di avanzamento a strisce

La classe ".progress-bar-striped" viene utilizzata per creare barre di avanzamento a strisce (la classe di utilità di sfondo viene utilizzata per mostrare colori diversi).

<div class="progress"> <div class="progress-bar progress-bar-striped" role="progressbar" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">20%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100">40%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">60%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 80%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">80%</div> </div> <div class="progress"> <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div> </div>

Le barre di avanzamento a strisce dovrebbero avere il seguente aspetto:

Come creare barre di avanzamento Bootstrap 5?

8 barre di avanzamento a strisce animate

L’ultima opzione è animare la striscia usando la classe ".progress-bar-animated".

<div class="progress"> <div class="progress-bar bg-success progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">50%</div> </div>

Questo creerà una barra di avanzamento animata con strisce verdi. Ricorda che puoi animare solo le barre a strisce e non quelle predefinite.

9 Modifica dell’altezza o dello spessore delle barre di avanzamento

Per impostazione predefinita, le barre di avanzamento avranno un’altezza di 1 rem. È possibile modificare l’altezza utilizzando lo stile in linea all’interno della classe ".progress-bar" e l’involucro esterno verrà automaticamente allineato di conseguenza. Creiamo due barre con 0.rem e 30px di altezza:

<div class="progress"> <div class="progress-bar bg-danger" role="progressbar" style="width: 50%; height: 0.5rem;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div> </div><br> <div class="progress"> <div class="progress-bar bg-info" role="progressbar" style="width: 75%; height: 30px;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div> </div>

Il risultato dovrebbe essere come di seguito sul browser:

Come creare barre di avanzamento Bootstrap 5?

Il problema nel cambiare l’altezza è che le etichette quando vengono utilizzate non si allineano correttamente. Anche in questo caso dovresti usare stili aggiuntivi manualmente per allineare le etichette al centro verticale.


Impara Bootstrap 5 (Indice )


Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More