Bootstrap 4 voortgangsbalken
Basisvoortgangsbalk
Een voortgangsbalk kan worden gebruikt om een gebruiker te laten zien hoe ver hij/zij is in een proces.
Om een standaard voortgangsbalk te maken, voegt u een .progressklasse toe aan een containerelement en voegt u de .progress-barklasse toe aan het onderliggende element. Gebruik de CSS- widtheigenschap om de breedte van de voortgangsbalk in te stellen:
Voorbeeld
<div class="progress">
<div class="progress-bar" style="width:70%"></div>
</div>
Hoogte voortgangsbalk
De hoogte van de voortgangsbalk is standaard 16px. Gebruik de CSS- heighteigenschap om deze te wijzigen. Merk op dat je dezelfde hoogte moet instellen voor de voortgangscontainer en de voortgangsbalk:
Voorbeeld
<div class="progress" style="height:20px">
<div class="progress-bar" style="width:40%;height:20px"></div>
</div>
Voortgangsbalklabels
Voeg tekst toe in de voortgangsbalk om het zichtbare percentage weer te geven:
Voorbeeld
<div class="progress">
<div class="progress-bar" style="width:70%">70%</div>
</div>
Gekleurde voortgangsbalken
Standaard is de voortgangsbalk blauw (primair). Gebruik een van de contextuele achtergrondklassen van Bootstrap 4 om de kleur te wijzigen:
Voorbeeld
<!-- Blue -->
<div class="progress">
<div class="progress-bar"
style="width:10%"></div>
</div>
<!-- Green -->
<div
class="progress">
<div
class="progress-bar bg-success" style="width:20%"></div>
</div>
<!--
Turquoise -->
<div class="progress">
<div class="progress-bar bg-info" style="width:30%"></div>
</div>
<!-- Orange -->
<div class="progress">
<div class="progress-bar bg-warning"
style="width:40%"></div>
</div>
<!-- Red -->
<div
class="progress">
<div class="progress-bar bg-danger"
style="width:50%"></div>
</div>
<!-- White -->
<div
class="progress border">
<div
class="progress-bar bg-white" style="width:60%"></div>
</div>
<!--
Grey -->
<div class="progress">
<div class="progress-bar bg-secondary"
style="width:70%"></div>
</div>
<!-- Light Grey -->
<div
class="progress border">
<div class="progress-bar bg-light"
style="width:80%"></div>
</div>
<!--
Dark Grey -->
<div class="progress">
<div class="progress-bar bg-dark" style="width:90%"></div>
</div>
Gestreepte voortgangsbalken
Gebruik de .progress-bar-stripedklasse om strepen toe te voegen aan de voortgangsbalken:
Voorbeeld
<div class="progress">
<div class="progress-bar
progress-bar-striped" style="width:40%"></div>
</div>
Geanimeerde voortgangsbalk
Voeg de .progress-bar-animatedklas toe om de voortgangsbalk te animeren:
Voorbeeld
<div class="progress-bar progress-bar-striped progress-bar-animated"
style="width:40%"></div>
Meerdere voortgangsbalken
Voortgangsbalken kunnen ook worden gestapeld:
Voorbeeld
<div class="progress">
<div class="progress-bar bg-success"
style="width:40%">
Free Space
</div>
<div class="progress-bar bg-warning" style="width:10%">
Warning
</div>
<div class="progress-bar bg-danger"
style="width:20%">
Danger
</div>
</div>