Bootstrap 5.2 / Componenten

Progress

Documentatie en voorbeelden voor het gebruik van de eigen voortgangsbalken van Bootstrap, met ondersteuning voor gestapelde balken, geanimeerde achtergronden en tekstlabels.

Hoe het werkt

Progress-componenten zijn gebouwd met twee HTML-elementen, wat CSS om de breedte in te stellen en een paar attributen. We gebruiken het HTML5-<progress>-element niet, zodat je voortgangsbalken kunt stapelen, animeren en er tekstlabels overheen kunt plaatsen.

We gebruiken de .progress als wrapper om de maximale waarde van de voortgangsbalk aan te geven.
We gebruiken de binnenste .progress-bar om de voortgang tot nu toe aan te geven.
De .progress-bar heeft een inline stijl, utility-klasse of eigen CSS nodig om de breedte in te stellen.
De .progress-bar heeft ook een aantal role- en aria-attributen nodig om toegankelijk te zijn, waaronder een toegankelijke naam (via aria-label, aria-labelledby of iets vergelijkbaars).

Zet dat allemaal bij elkaar en je krijgt de volgende voorbeelden.

HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basisvoorbeeld" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basisvoorbeeld" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basisvoorbeeld" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basisvoorbeeld" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Basisvoorbeeld" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Bootstrap biedt een handvol utilities om de breedte in te stellen. Afhankelijk van je behoeften kunnen die helpen om voortgang snel in te stellen.

HTML

<div class="progress">
  <div class="progress-bar w-75" role="progressbar" aria-label="Basisvoorbeeld" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Labels

Voeg labels aan je voortgangsbalken toe door tekst binnen de .progress-bar te plaatsen.

HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Voorbeeld met label" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
</div>

Hoogte

We stellen alleen een height-waarde in op de .progress, dus als je die waarde wijzigt, past de binnenste .progress-bar zich automatisch aan.

HTML

<div class="progress" style="height: 1px;">
  <div class="progress-bar" role="progressbar" aria-label="Voorbeeld van 1px hoog" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress" style="height: 20px;">
  <div class="progress-bar" role="progressbar" aria-label="Voorbeeld van 20px hoog" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Achtergronden

Gebruik achtergrond-utility-klassen om het uiterlijk van afzonderlijke voortgangsbalken te wijzigen.

HTML

<div class="progress">
  <div class="progress-bar bg-success" role="progressbar" aria-label="Success-voorbeeld" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-info" role="progressbar" aria-label="Info-voorbeeld" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-warning" role="progressbar" aria-label="Warning-voorbeeld" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar bg-danger" role="progressbar" aria-label="Danger-voorbeeld" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Let op

Gebruik kleur niet als enige manier om iets duidelijk te maken. Zorg voor extra aanwijzingen (tekst, een icoon, een ander contrast), zodat mensen die kleuren niet of anders waarnemen de informatie ook krijgen.

Meerdere balken

Neem indien nodig meerdere voortgangsbalken op in één progress-component.

HTML

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-label="Segment een" style="width: 15%" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-success" role="progressbar" aria-label="Segment twee" style="width: 30%" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100"></div>
  <div class="progress-bar bg-info" role="progressbar" aria-label="Segment drie" style="width: 20%" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Gestreept

Voeg .progress-bar-striped toe aan een .progress-bar om via een CSS-gradiënt een streeppatroon over de achtergrondkleur van de voortgangsbalk te leggen.

HTML

<div class="progress">
  <div class="progress-bar progress-bar-striped" role="progressbar" aria-label="Standaard gestreept voorbeeld" style="width: 10%" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" aria-label="Gestreept success-voorbeeld" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-label="Gestreept info-voorbeeld" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-warning" role="progressbar" aria-label="Gestreept warning-voorbeeld" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-label="Gestreept danger-voorbeeld" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Geanimeerde strepen

De gestreepte gradiënt kan ook geanimeerd worden. Voeg .progress-bar-animated toe aan .progress-bar om de strepen via CSS3-animaties van rechts naar links te laten bewegen.

HTML

<div class="progress">
  <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-label="Geanimeerd gestreept voorbeeld" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
</div>

CSS

Variabelen

Nieuw in v5.2.0

Als onderdeel van Bootstraps groeiende aanpak met CSS-variabelen gebruiken voortgangsbalken nu lokale CSS-variabelen op .progress, voor betere aanpassingen in realtime. De waarden voor de CSS-variabelen worden via Sass ingesteld, dus aanpassen via Sass wordt nog steeds ondersteund.

Standaardwaarden: zie scss/_progress.scss in de Bootstrap-broncode.

Sass-variabelen

Standaardwaarden: zie scss/_variables.scss in de Bootstrap-broncode.

Keyframes

Worden gebruikt om de CSS-animaties voor .progress-bar-animated te maken. Opgenomen in scss/_progress-bar.scss.

Standaardwaarden: zie scss/_progress.scss in de Bootstrap-broncode.