Creare progress bar con Bootstrap

Un altro elemento facilmente realizzabile con Bootstrap è la barra di progressione (o barra di avanzamento). Nella sua forma più semplice, la barra di progressione richiede semplicemente un div di classe progress che contiene un altro elemento di classe progress-bar. Eventualmente si può inserire al suo interno un elemento con un testo che indica la percentuale di completamento.

Vediamo un esempio:

<div class="progress" style="width:500px">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    <span>80%<span>
  </div>
</div>

La larghezza della parte colorata della barra è definita mediante il valore della proprietà CSS width. Pertanto, per animare una barra e far si che progredisca, occorre incrementare il valore di questa proprietà in modo dinamico, ad esempio mediante un timer.

$(function() {
  var progress = setInterval(function() {
    var larghezza = $('.progress').width();
    var $bar = $('.progress-bar');
    if ($bar.width() == larghezza) {
      clearInterval(progress);
    }else{
      $bar.width($bar.width() + 10);
    }
    $bar.html("<span>" + (Math.floor($bar.width() / larghezza * 100) + "%") + "</span>");
  }, 800);
});

Come tanti elementi che abbiamo già incontrato, anche le barre di progressione possono assumere colori diversi a seconda della classe che viene loro aggiunta:

• progress-bar-success: crea una barra verde;
• progress-bar-info: crea una barra azzurra;
• progress-bar-warning: crea una barra arancio;
• progress-bar-danger: crea una barra rossa;

<div class="progress" style="width:500px">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    <span>80%<span>
  </div>
</div>

Se poi si assegna la classe progress-striped al div principale della barra di progressione, la parte colorata della barra, apparirà a strisce oblique:

<div class="progress progress-striped" style="width:500px" >
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 80%;">
    <span>80%<span>
  </div>
</div>

Aggiungendo alla classe progress-striped anche la classe active, la barra risulterà animata.