HTML.it - Reference Bootstrap

Guida Boostrap 3 - Reference

Indice dei contenuti

Barre di avanzamento

Il componente Progress Bar è utile quando si vuole mostrare all'utente lo stato di avanzamento di un'operazione o il risultato di un sondaggio. Gli eventuali effetti di animazione e transizione non sono supportati su IE9 e versioni inferiori.

Markup HTML di base

Il componente si struttura a partire da un div con classe .progress. Al suo interno va collocato un altro div con classe .progress-bar. Questo secondo div dovrebbe poi avere associato uno stile per la proprietà width espresso in pecentuale e che imposta l'ampiezza della barra.

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

Colori della barra

Il colore di default della barra di progresso è il blue. Sono disponibili varianti create a partire dalle classi .success, .warning, .danger, .info.

<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" style="width: 60%;"></div>
</div>
<br>
<div class="progress">
  <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" style="width: 60%;"></div>
</div>



Barre a strisce

Su questa base, si possono creare barre a strisce ottenute con i gradienti CSS3. La variante si ottiene aggiungendo la classe .progress-striped al div principale.

<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 60%;"></div>
</div>



Barre animate

Per ottenere barre di avanzamento animate a partire dalle barre a striscie, si aggiunge alle classi .progress e .progress-striped la classe .active.

<div class="progress progress-striped active">
  <div class="progress-bar progress-bar-success" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" style="width: 60%;"></div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" style="width: 60%;"></div>
</div>



Regole CSS per il componente Progress Bar

La modifica della barra nella configurazione a striscie è un po' complessa per via della presenza del gradiente. Rimandiamo al codice del CSS di Bootstrap per i dettagli e proproniamo qui solo la regola con cui modificare la barra statica standard:

.progress-bar {
  float: left;
  width: 0;
  height: 100%;
  font-size: 12px;
  color: #ffffff;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
          box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
          transition: width 0.6s ease;
}