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

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<span class="sr-only">60% compleet</span>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Default