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>