Progress Bar
Una barra di avanzamento può essere usato per mostrare che punto un utente è in un processo:
Base Progress Bar
La classe w3-progresso-contenitore definisce un contenitore per la barra di avanzamento, e w3-progressbar definisce la barra di avanzamento reale (la zona "pieno"). Impostare la larghezza della barra di avanzamento con la proprietà width CSS:
Esempio
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:10%"></div>
</div>Barra di avanzamento Taglie
Impostare la larghezza / dimensione della barra di avanzamento con un valore percentuale da 0 a 100%:
Esempio
<div class="w3-progress-container">
<div class="w3-progressbar" style="width:50%"></div>
</div>Progress Bar Colori
Per impostazione predefinita, il colore del w3-progresso-contenitore è di colore grigio chiaro e il w3-progressbar è grigio:
Cambiare il loro colore con una qualsiasi delle classi di colore W3.CSS:
Esempio
<div class="w3-progress-container
w3-light-blue">
<div class="w3-progressbar
w3-blue" style="width:75%"></div>
</div>Arrotondati barre di avanzamento
Utilizzare una delle classi w3-round per aggiungere gli angoli arrotondati alle vostre barre di avanzamento:
Esempio
<div class="w3-progress-container w3-round">
<div
class="w3-progressbar w3-round" style="width:25%"></div>
</div>Etichette Progress Bar
Aggiungere un nuovo elemento all'interno del "w3-progressbar" per aggiungere un'etichetta per la barra di avanzamento.
Suggerimento: Utilizzare la classe w3-center per mantenere sempre l'etichetta centrato. Se omesso, verrà allineato a sinistra.
Esempio
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:25%">
<div class="w3-center w3-text-white">25%</div>
</div>
</div>Dinamico Progress Bar
Utilizzare JavaScript per creare una barra di avanzamento dinamica:
Esempio
<div class="w3-progress-container">
<div id="myBar"
class="w3-progressbar w3-green" style="width:1%"></div>
</div>
<button class="w3-btn" onclick="move()">Click Me</button>
<script>
function move() {
var elem =
document.getElementById("myBar");
var width =
1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>Dinamico Barra di avanzamento con le etichette
Etichetta Centrato:
Allineato a sinistra etichetta:
Etichetta di fuori della barra di avanzamento: