DSO Component Library

Progress Bar 

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="" aria-valuemax="100" style="width: 60%;">
        <span class="sr-only">60% compleet</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 }}%;">
    <span class="sr-only">{{ progress }}% compleet</span>
  </div>
</div>
 
progress: 60
value:
  min: null
  max: 100

Toont een progress-bar. 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).