Skip to main content

Progress bar

La Progress bar è una componente utile per stabilire la percentuale di completamento di un task all’interno di una pagina.
Questo elemento può essere utilizzato per indicarne la percentuale di completamento, oppure come elemento aggiuntivo della componente wizard, come indicatore di una procedura.

1
2
3
4
5
6
7
8
9
<div class="progress progress-lg progress-color">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
  <div class="progress-bar" role="progressbar" style="width: 33%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
  <div class="progress-bar bg-dark" role="progressbar" style="width: 33%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>

La barra standard è molto sottile, per ottenere un spessore maggiore va utilizzata la classe progress-lg.

Documentazione tecnica

Per i dettagli tecnici sulla costruzione delle progress bar si veda la relativa pagina