Bootstrap 4 barre di avanzamento
Barra di avanzamento di base
Una barra di avanzamento può essere utilizzata per mostrare a un utente fino a che punto si trova in un processo.
Per creare una barra di avanzamento predefinita, aggiungi una .progressclasse a un elemento contenitore e aggiungi la .progress-barclasse al relativo elemento figlio. Usa la widthproprietà CSS per impostare la larghezza della barra di avanzamento:
Esempio
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Altezza della barra di avanzamento
L'altezza della barra di avanzamento è 16px per impostazione predefinita. Usa la heightproprietà CSS per cambiarlo. Tieni presente che devi impostare la stessa altezza per il contenitore di avanzamento e la barra di avanzamento:
Esempio
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Etichette della barra di avanzamento
Aggiungi del testo all'interno della barra di avanzamento per mostrare la percentuale visibile:
Esempio
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Barre di avanzamento colorate
Per impostazione predefinita, la barra di avanzamento è blu (primaria). Usa una delle classi di sfondo contestuale di Bootstrap 4 per cambiarne il colore:
Esempio
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<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>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Barre di avanzamento a strisce
Usa la .progress-bar-stripedclasse per aggiungere strisce alle barre di avanzamento:
Esempio
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Barra di avanzamento animata
Aggiungi la .progress-bar-animatedclasse per animare la barra di avanzamento:
Esempio
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Barre di avanzamento multiple
Le barre di avanzamento possono anche essere impilate:
Esempio
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>