Skip to main content
logo regione lombardia

Bootstrap Regione Lombardia

Versione di Bootstrap Italia per la Regione Lombardia per lo sviluppo di applicazioni web per la PA

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
10
11
12

<div class="progress progress-color">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="0" 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" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-color">
  <div class="progress-bar" role="progressbar" style="width: 100%" 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.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="progress progress-lg progress-color">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg 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-lg progress-color">
  <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress progress-lg progress-color">
  <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="33" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Documentazione tecnica

Per i dettagli tecnici sulla costruzione delle progress bar si veda la voce:
Progress bar