Progress Bar

Component preview

Voortgangsindicatoren informeren gebruikers over de status van lopende processen, zoals het laden de pagina, het indienen van een formulier of het uploaden van bestanden. Gebruik een progress bar om gebruikers te laten weten dat inhoud wordt geladen en dat het een bepaalde tijd zal duren.

Bepaalde of onbepaalde tijd (Material Design, 2020)

Bepaalde tijd: Deze voortgangsindicatoren geven aan hoe lang een proces duurt. Ze moeten worden gebruikt wanneer het voltooiingspercentage van het proces kan worden gedetecteerd.

Onbepaalde tijd: Deze voortgangsindicatoren geven een onbepaalde hoeveelheid wachttijd aan. Ze moeten worden gebruikt als er geen voortgang is waar te nemen of als het niet nodig is om aan te geven hoe lang een proces duurt.

Technische opmerkingen component

Let op het gebruik van correcte waardes voor aria-valuenow (de huidige waarde van de progressbar), aria-valuemin (de minimale waarde) en aria-valuemax (de maximale waarde).

Wanneer het component gebruiken:

Gebruik een progress bar om gebruikers te laten weten dat inhoud wordt geladen en dat het een bepaalde tijd zal duren.

Richtlijnen bij gebruik spinner/progress bar:

wachttijd kleiner dan 1 seconde: geen spinner
wachttijd tussen 1 en 4 seconden: spinner (voorbeeld boven)
wachttijd groter dan 4 seconden: progress bar (voorbeelden beneden)
wachttijd tussen 4 seconden en 1 minuut: progress bar met percentage
wachttijd groter dan 1 minuut: progress bar met tijd inschatting

Wanneer het component niet te gebruiken:

Gebruik geen progress bar als de verwachte wachttijd kleiner is dan 4 seconden of de wachttijd niet van te voren kan worden ingeschat (onbepaalde tijd).

Hoe het component te gebruiken:

Als het proces minder dan een minuut duurt, geef dan het percentage aan dat is voltooid of het aantal geladen items. Als het proces langer dan een minuut duurt, geef dan een geschatte resterende tijd. Deze informatie laat de gebruiker weten dat ze een langere wachttijd dan normaal kunnen verwachten (UX Movement, 2016).

Voorbeelden:

Bronvermelding

Material Design. Progress indicators. Geraadpleegd op 4 juni 2020, van https://material.io/components/progress-indicators
UX Movement. (2016, 15 november). Progress Bars vs. Spinners: When to Use Which. Geraadpleegd op 4 juni 2020, van https://uxmovement.com/navigation/progress-bars-vs-spinners-when-to-use-which/

<!-- Default -->
<dso-progress-bar progress="60"></dso-progress-bar>

<!-- Text Progressbar -->
<dso-progress-bar progress="25">Nog ongeveer 4 minuten</dso-progress-bar>

<!-- Non Default Values -->
<dso-progress-bar progress="3" max="4">3/4</dso-progress-bar>

<!-- Default -->
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%"
  >
    <span>60%</span>
  </div>
</div>

<!-- Text Progressbar -->
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="25"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 25%"
  >
    <span>Nog ongeveer 4 minuten</span>
  </div>
</div>

<!-- Non Default Values -->
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-valuenow="75"
    aria-valuemin="0"
    aria-valuemax="4"
    style="width: 75%"
  >
    <span>3/4</span>
  </div>
</div>