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 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.
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).
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:
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).
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.
<!-- 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