Bootstrap - barre di avanzamento

Questo capitolo tratta delle barre di avanzamento di Bootstrap. Lo scopo delle barre di avanzamento è mostrare che le risorse sono in caricamento, in corso o che è in corso un'azione relativa agli elementi sulla pagina.

Le barre di avanzamento utilizzano transizioni e animazioni CSS3 per ottenere alcuni dei loro effetti. Queste funzionalità non sono supportate in Internet Explorer 9 e versioni precedenti o precedenti di Firefox. Opera 12 non supporta le animazioni.

Barra di avanzamento predefinita

Per creare una barra di avanzamento di base:

  • Aggiungi un <div> con una classe di .progress.

  • Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar.

  • Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress">
   <div class = "progress-bar" role = "progressbar" aria-valuenow = "60" 
      aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra di avanzamento alternativa

Per creare una barra di avanzamento con stili diversi:

  • Aggiungi un <div> con una classe di .progress.

  • Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar e classe progress-bar-* dove * potrebbe essere success, info, warning, danger.

  • Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra di avanzamento a strisce

Per creare una barra di avanzamento a strisce:

  • Aggiungi un <div> con una classe di .progress e .progress-striped.

  • Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar e classe progress-bar-* dove * potrebbe essere success, info, warning, danger.

  • Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Vediamo un esempio di seguito:

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 90%;">
      
      <span class = "sr-only">90% Complete (Sucess)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-info" role = "progressbar"
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style="width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
</div>

<div class = "progress progress-striped">
   <div class = "progress-bar progress-bar-danger" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 10%;">
      
      <span class = "sr-only">10% Complete (danger)</span>
   </div>
</div>

Barra di avanzamento animata

Per creare una barra di avanzamento animata:

  • Aggiungi un <div> con una classe di .progress e .progress-striped. Aggiungi anche classe.active per .progress-striped.

  • Successivamente, all'interno di <div> sopra, aggiungi un <div> vuoto con una classe di .progress-bar.

  • Aggiungi un attributo di stile con la larghezza espressa come percentuale. Diciamo, ad esempio, style = "60%"; indica che la barra di avanzamento era al 60%.

Questo animerà le strisce da destra a sinistra.

Vediamo un esempio di seguito:

<div class = "progress progress-striped active">
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
</div>

Barra di avanzamento in pila

Puoi anche impilare più barre di avanzamento. Posiziona le barre di avanzamento multiple nella stessa.progress per impilarli come mostrato nel seguente esempio:

<div class = "progress">
   
   <div class = "progress-bar progress-bar-success" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 40%;">
      
      <span class = "sr-only">40% Complete</span>
   </div>
   
   <div class = "progress-bar progress-bar-info" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 30%;">
      
      <span class = "sr-only">30% Complete (info)</span>
   </div>
   
   <div class = "progress-bar progress-bar-warning" role = "progressbar" 
      aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100" style = "width: 20%;">
      
      <span class = "sr-only">20%Complete (warning)</span>
   </div>
   
</div>