W3.CSS- vorderingstawe
'n Vorderingsbalk kan gebruik word om te wys hoe ver 'n gebruiker in 'n proses is:
Basiese vorderingsbalk
'n Normale <div>-element kan vir 'n vorderingsbalk gebruik word.
Die CSS-breedte-eienskap kan gebruik word om die hoogte en breedte van 'n vorderingsbalk te stel.
Voorbeeld
<div class="w3-border">
<div class="w3-grey" style="height:24px;width:20%"></div>
</div>
Vorderingbalkwydte
Verander die breedte van 'n vorderingsbalk met die CSS- breedte - eienskap (van 0 na 100%):
Voorbeeld
<div class="w3-light-grey">
<div class="w3-grey" style="height:24px;width:50%"></div>
</div>
Progress Bar Kleure
Gebruik die w3- kleurklasse om die kleur van 'n vorderingsbalk te verander:
Voorbeeld
<div class="w3-light-grey">
<div class="w3-blue" style="width:75%"></div>
</div>
Progress Bar Etikette
Voeg teks binne 'n w3-houerelement by om 'n etiket by die vorderingsbalk te voeg.
Gebruik die w3-sentrumklas om die etiket te sentreer. As dit weggelaat word, sal dit in lyn gelaat word.
Voorbeeld
<div class="w3-light-grey">
<div
class="w3-container w3-green w3-center" style="width:25%">25%</div>
</div>
Vorderingsbalk Teksgrootte
Gebruik die w3 -grootte klasse om die teksgrootte in die houer te verander:
Voorbeeld
<div class="w3-light-grey w3-xlarge">
<div class="w3-container w3-green" style="width:50%">50%</div>
</div>
Progress Bar Padding
Gebruik die w3-opvullingsklasse om opvulling by die houer te voeg.
Voorbeeld
<div class="w3-light-grey">
<div
class="w3-container w3-red w3-padding w3-center" style="width:25%">25%</div>
</div>
</div>
Afgeronde vorderingstawe
Gebruik die w3-ronde klasse om afgeronde hoeke by 'n vorderingsbalk te voeg:
Voorbeeld
<div class="w3-light-grey w3-round">
<div
class="w3-container w3-round w3-blue" style="width:25%">25%</div>
</div>
Dinamiese vorderingsbalk
Gebruik JavaScript om 'n dinamiese vorderingsbalk te skep:
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>
Dinamiese vorderingsbalk met etikette
Gesentreerde etiket:
Voorbeeld
Links-belynde etiket:
Voorbeeld
Etiket buite die vorderingbalk:
Voorbeeld
20%
Nog 'n voorbeeld (gevorderd):
Voorbeeld
Added 0 of 10 photos