Minimal Accessible Progress Bar Plugin With jQuery - aria-progressbar

aria-progressbar is a jQuery plugin that helps you create a CSS3 animated, WAI-ARIA compliant progress bar to represent the percentage values in an user-friendly / accessible way.

ARIA roles included:

• progressbar
• aria-valuenow
• aria-valuemin
• aria-valuemax
• aria-valuetext

Install it via NPM:

$ npm install t-aria-progressbar --save

How to use it:

1. Load the stylesheet aria-progressbar.css that provides the basic styles & animations for the accessible progress bar.

<link rel="stylesheet" href="aria-progressbar.css">

2. Create a DIV element to place the accessible progress bar.

<div id="pgb">
</div>

3. Load jQuery library and the aria-progressbar.js script at the end of the webpage.

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="aria-progressbar.js"></script>

4. Create a new instance of the aria-progressbar plugin.

var pgb = $('#pgb');
pgb.ariaProgressbar();

5. Update the progress bar.

// pgb.ariaProgressbar('update', value);
var i = 0;
var int = setInterval(function() {
    if (i < 100) {
      i = i + 5;
      pgb.ariaProgressbar('update', i);
    } else {
      clearInterval(int);
    }
  }, 600);
});

6. Possible options to customize the accessible progress bar.

pgb.ariaProgressbar({
  progressClass: 'progress',
  progressBarClass: 'progress__bar',
  minVal: 0,
  maxVal: 100,
  textLabel: '{X} percent completed',
  destroyDelay: 300,
  destroyFadeOutSpeed: 300
});

Change log:

2018-01-13

• v1.0.0

---

This awesome jQuery plugin is developed by DavideTriso. For more Advanced Usages, please check the demo page or visit the official website.