<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>
Based on the version from MDB:
https://mdbootstrap.com/components/progress-bars/#basic-example
Be sure to give the aria-valuenow
, aria-valuemin
and aria-valuemax
the values that describe the progress best.
No additional actions, aside from the markup, are needed to use this component.