Minimal Accessible Progress Bar Plugin With jQuery - aria-progressbar

File Size: 43.7 KB
Views Total: 5849
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">

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

<script src="//"></script>
<script src="aria-progressbar.js"></script>

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

var pgb = $('#pgb');

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 {
  }, 600);

6. Possible options to customize the accessible progress bar.

  progressClass: 'progress',
  progressBarClass: 'progress__bar',
  minVal: 0,
  maxVal: 100,
  textLabel: '{X} percent completed',
  destroyDelay: 300,
  destroyFadeOutSpeed: 300

Change log:


  • 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.