Minimal Accessible Progress Bar Plugin With jQuery - aria-progressbar
File Size: | 43.7 KB |
---|---|
Views Total: | 5773 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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