Progress Bar

Component preview opent in nieuw tabblad

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, dit moet niet een percentage zijn), 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:

Probeer altijd de progress waarde in aria-valuenow op te nemen, zodat de gebruiker weet hoe lang hij/zij moet wachten. Omdat het label ook de β€˜accessible name’ is voor het component, dient daarin idealiter ook genoemd te worden β€˜waarop’ de gebruiker aan het wachten is.

Voorbeelden:

Bronvermelding

<!-- Default -->
<dso-progress-bar progress="60">Genereren export: Nog ongeveer 4 minuten.</dso-progress-bar>
<!-- Non Default Values -->
<dso-progress-bar progress="3" max="12">Bestanden comprimeren: 12 stuks.</dso-progress-bar>
<!-- Default -->
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-labelledby="progress-bar-label"
    aria-valuenow="60"
    aria-valuemin="0"
    aria-valuemax="100"
    style="width: 60%"
  >
    <span id="progress-bar-label">Genereren export: Nog ongeveer 4 minuten.</span>
  </div>
</div>
<!-- Non Default Values -->
<div class="progress">
  <div
    class="progress-bar"
    role="progressbar"
    aria-labelledby="progress-bar-label"
    aria-valuenow="3"
    aria-valuemin="0"
    aria-valuemax="12"
    style="width: 3%"
  >
    <span id="progress-bar-label">Bestanden comprimeren: 12 stuks.</span>
  </div>
</div>
<dso-progress-bar progress="{{ progress }}" {{ attributes([value.min != 0, 'min', value.min], [value.max != 100, 'max', value.max])}}>{% if progressLabel %}{{ progressLabel }}{% endif %}</dso-progress-bar>
/* Default */
__title: Standaard
progress: 60
progressLabel: 'Genereren export: Nog ongeveer 4 minuten.'
value:
  min: 0
  max: 100
/* Non Default Values */
__title: Niet-standaard waarden
progress: 3
progressLabel: 'Bestanden comprimeren: 12 stuks.'
value:
  min: 0
  max: 12