Documentazione ed esempi per l'utilizzo di barre di avanzamento personalizzate Bootstrap con supporto per barre impilate, sfondi animati ed etichette di testo.
Come funziona
I componenti di avanzamento sono costruiti con due elementi HTML, alcuni CSS per impostare la larghezza e alcuni attributi. Non utilizziamo l' elemento HTML5<progress> , assicurandoti che tu possa impilare le barre di avanzamento, animarle e posizionare etichette di testo su di esse.
Usiamo il .progresscome wrapper per indicare il valore massimo della barra di avanzamento.
Usiamo l'interiore .progress-barper indicare i progressi finora.
Richiede uno stile .progress-barinline, una classe di utilità o un CSS personalizzato per impostarne la larghezza.
Richiede .progress-baranche alcuni attributi rolee ariaper renderlo accessibile.
Metti tutto insieme e avrai i seguenti esempi.
Bootstrap fornisce una manciata di utilità per impostare la larghezza . A seconda delle tue esigenze, questi possono aiutare con la configurazione rapida dei progressi.
Etichette
Aggiungi etichette alle barre di avanzamento posizionando il testo all'interno del file .progress-bar.
25%
Altezza
Impostiamo un heightvalore solo su .progress, quindi se modifichi quel valore, l'inner .progress-barsi ridimensionerà automaticamente di conseguenza.
Sfondi
Utilizzare le classi di utilità in background per modificare l'aspetto delle singole barre di avanzamento.
Più barre
Includi più barre di avanzamento in un componente di avanzamento, se necessario.
A strisce
Aggiungi .progress-bar-stripeda qualsiasi .progress-barper applicare una striscia tramite gradiente CSS sul colore di sfondo della barra di avanzamento.
Strisce animate
Il gradiente a strisce può anche essere animato. Aggiungi .progress-bar-animateda .progress-barper animare le strisce da destra a sinistra tramite le animazioni CSS3.