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

Progress Bar 

<div class="progress" id="progress-example">
    <div class="progress-bar" role="progressbar" style="width: 0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<!-- Example script -->
<script>
    $(document).ready(function() {
        var progress = 0;
        setInterval(function() {
            progress += 10;
            if (progress > 100) {
                progress = 0;
            }
            $('#progress-example .progress-bar').width(progress + '%').attr('aria-valuenow', progress);
        }, 1000);
    });
</script>

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.