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), 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).
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).
<!-- 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>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="{{ progress }}" aria-valuemin="{{ value.min }}" aria-valuemax="{{ value.max }}" style="width: {{ progress }}%;">
{%- if progressLabel %}
<span>{{ progressLabel }}</span>
{%- else %}
<span>{{ progress }}%</span>
{% endif -%}
</div>
</div>
/* Default */
__title: minder dan 1 minuut
progress: 60
value:
min: 0
max: 100
/* Text Progressbar */
__title: meer dan 1 minuut
progress: 25
value:
min: 0
max: 100
progressLabel: Nog ongeveer 4 minuten