DSO Component Library

# Progress Bar

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <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

`

- Handle: @progress-bar
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\04-indicators\progress-bar\progress-bar.hbs

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`