W3.Barre di avanzamento CSS
Una barra di avanzamento può essere utilizzata per mostrare fino a che punto è un utente in un processo:
Barra di avanzamento di base
Un normale elemento <div> può essere utilizzato per una barra di avanzamento.
La proprietà CSS width può essere utilizzata per impostare l'altezza e la larghezza di una barra di avanzamento.
Esempio
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Larghezza barra di avanzamento
Modifica la larghezza di una barra di avanzamento con la proprietà Larghezza CSS (da 0 a 100%):
Esempio
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Colori della barra di avanzamento
Usa le classi di colore w3 per cambiare il colore di una barra di avanzamento:
Esempio
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Etichette della barra di avanzamento
Aggiungi testo all'interno di un elemento w3-container per aggiungere un'etichetta alla barra di avanzamento.
Usa la classe w3-center per centrare l'etichetta. Se omesso, sarà allineato a sinistra.
Esempio
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Dimensioni del testo della barra di avanzamento
Usa le classi w3- size per modificare la dimensione del testo nel contenitore:
Esempio
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Imbottitura della barra di avanzamento
Usa le classi w3-padding per aggiungere padding al contenitore.
Esempio
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Barre di avanzamento arrotondate
Usa le classi w3-round per aggiungere angoli arrotondati a una barra di avanzamento:
Esempio
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Barra di avanzamento dinamica
Usa JavaScript per creare una barra di avanzamento dinamica:
Esempio
<div class="w3-light-grey">
<div id="myBar" class="w3-container w3-green"
style="height:24px;width:1%"></div>
</div>
<button class="w3-button w3-light-grey" 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>
Barra di avanzamento dinamica con etichette
Etichetta centrata:
Esempio
Etichetta allineata a sinistra:
Esempio
Etichetta fuori dalla barra di avanzamento:
Esempio
20%
Un altro esempio (avanzato):
Esempio
Added 0 of 10 photos