W3.CSS- voortgangsbalken
Een voortgangsbalk kan worden gebruikt om te laten zien hoe ver een gebruiker in een proces is:
Basisvoortgangsbalk
Een normaal <div> element kan gebruikt worden voor een voortgangsbalk.
De CSS width eigenschap kan worden gebruikt om de hoogte en breedte van een voortgangsbalk in te stellen.
Voorbeeld
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Breedte voortgangsbalk
Verander de breedte van een voortgangsbalk met de CSS width eigenschap (van 0 tot 100%):
Voorbeeld
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Voortgangsbalkkleuren
Gebruik de w3 -kleurklassen om de kleur van een voortgangsbalk te wijzigen:
Voorbeeld
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Voortgangsbalklabels
Voeg tekst toe in een w3-containerelement om een label aan de voortgangsbalk toe te voegen.
Gebruik de klasse w3-center om het label te centreren. Als het wordt weggelaten, wordt het links uitgelijnd.
Voorbeeld
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Tekstgrootte voortgangsbalk
Gebruik de w3- grootteklassen om de tekstgrootte in de container te wijzigen:
Voorbeeld
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Opvulling voortgangsbalk
Gebruik de klassen w3-padding om opvulling aan de container toe te voegen.
Voorbeeld
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Afgeronde voortgangsbalken
Gebruik de klassen w3-round om afgeronde hoeken toe te voegen aan een voortgangsbalk:
Voorbeeld
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dynamische voortgangsbalk
Gebruik JavaScript om een dynamische voortgangsbalk te maken:
Voorbeeld
<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>
Dynamische voortgangsbalk met labels
Gecentreerd etiket:
Voorbeeld
Links uitgelijnd label:
Voorbeeld
Label buiten de voortgangsbalk:
Voorbeeld
20%
Een ander voorbeeld (geavanceerd):
Voorbeeld
Added 0 of 10 photos