Nijmegen Component Library
You are viewing version 2 of the library, the latest version is

Progress Bar 

<!-- progress: 0 on a scale from 0 to 100 -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- progress: 25 on a scale from 0 to 100 -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- progress: 50 on a scale from 0 to 100 -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- progress: 75 on a scale from 0 to 100 -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- progress: 100 on a scale from 0 to 100 -->
<div class="progress">
    <div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Progress Bar

Based on the version from MDB:
https://mdbootstrap.com/components/progress-bars/#basic-example

Accessibility

Be sure to give the aria-valuenow, aria-valuemin and aria-valuemax the values that describe the progress best.

Using

No additional actions, aside from the markup, are needed to use this component.