Bootstrap 5: barre di avanzamento

Barra di progresso di base

La barra di progresso può essere utilizzata per visualizzare il progresso dell'utente in un processo.

Per creare una barra di progresso predefinita, aggiungi .progress Aggiungi la classe al elemento contenitore e .progress-bar Aggiungi la classe a ogni elemento figlio. Utilizza l'attributo width CSS per impostare la larghezza della barra di progresso:

Esempio

<div class="progress">
  <div class="progress-bar" style="width:70%"></div>
</div>

Prova direttamente

Altezza della barra di progresso

L'altezza predefinita della barra di progresso è 1rem（di solito 16px）。Utilizza CSS altezza per cambiarlo.

Suggerimento:Attenzione, devi impostare la stessa altezza per il contenitore di progresso e la barra di progresso:

Esempio

<div class="progress" style="height:20px">
  <div class="progress-bar" style="width:40%;height:20px"></div>
</div>

Prova direttamente

Etichetta della barra di progresso

Aggiungi testo nella barra di progresso per visualizzare la percentuale visibile:

Esempio

<div class="progress">
  <div class="progress-bar" style="width:70%">70%</div>
</div>

Prova direttamente

Barra di progresso a colori

Per impostazione predefinita, la barra di progresso è blu (principale). Utilizza qualsiasi classe di sfondo contestuale per cambiare il suo colore:

Esempio

<!-- Blu -->
<div class="progress">
  <div class="progress-bar" style="width:10%"></div>
</div>
<!-- Verde -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:20%"></div>
</div>
<!-- Turquoise -->
<div class="progress">
  <div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Arancione -->
<div class="progress">
   <div class="progress-bar bg-warning" style="width:40%"></div>
</div>
<!-- Rosso -->
<div class="progress">
  <div class="progress-bar bg-danger" style="width:50%"></div>
</div>
<!-- Bianco -->
<div class="progress border">
  <div class="progress-bar bg-white" style="width:60%"></div>
</div>
<!-- Grigio -->
<div class="progress">
  <div class="progress-bar bg-secondary" style="width:70%"></div>
</div>
<!-- Grigio Chiaro -->
<div class="progress border">
  <div class="progress-bar bg-light" style="width:80%"></div>
</div>
<!-- Grigio Scuro -->
<div class="progress">
  <div class="progress-bar bg-dark" style="width:90%"></div>
</div>

Prova direttamente

Barra di avanzamento a strisce

Usa .progress-bar-striped Aggiungi la classe per aggiungere strisce alla barra di avanzamento:

Esempio

<div class="progress">
  <div class="progress-bar progress-bar-striped" style="width:40%"></div>
</div>

Prova direttamente

animazione della barra di avanzamento

Aggiungi .progress-bar-animated Aggiungi la classe per creare animazioni di progresso:

Esempio

<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:40%"></div>

Prova direttamente

Più barre di avanzamento

Le barre di avanzamento possono essere sovrapposte:

Esempio

<div class="progress">
  <div class="progress-bar bg-success" style="width:40%">
    Spazio libero
  </div>
  <div class="progress-bar bg-warning" style="width:10%">
    Avviso
  </div>
  <div class="progress-bar bg-danger" style="width:20%">
    Danno
  </div>
</div>

Prova direttamente