Progress bar
Overview
Project lead: Laurent Goderre (@LaurentGoderre)
Purpose
The HTML5 progress element displays the progress of a task. Because some browsers do not support this functionality natively, this polyfill emulates the same functionality using generic HTML and WAI-ARIA.
Rationale
Browsers that do not support the progress element natively ignore the progress bar and therefore, nothing is displayed and its content is not exposed to assistive technologies. This polyfill ensures that the progress is visually conveyed through a progress bar and exposed to assistive technologies by adding WAI-ARIA.
Implementation
To use the polyfill, a standard progress element must be used. In cases where a browser doesn't support the progress element, the polyfill is automatically loaded.
Parameters
The progress bar polyfill accepts two parameters: max and value. Neither of these parameters are required.
Value parameter
This parameter represent the progress of the task and can be any decimal number between 0 and the max value. If value is omitted, the progress bar is considered to be indeterminate, which means that there is no indication on the actual progress of the task.
Max Parameter
This parameter represent the maximum progress for the task. When the value parameter is set to the maximum value, the task is considered complete. The max parameter can be any positive decimal number. If the parameter is omitted, the default value of 1.0 is assumed.
Example code
Task in progress
<progress value="25" max="100" />
Completed task
<progress value="50" max="50" />
Task of indeterminate progress
<progress />
<progress max="50" />
Examples
Development
The progress bar is dependent upon native support for the HTML5 progress element or the progress polyfill.
- js/polyfills/progress.js - contains the JavaScript code for the progress polyfill
- js/sass/includes/_progress.scss - contains the SCSS for the progress polyfill
- js/images/progress/ - contains the images for the progress polyfill
Known issues
There are no known issues at this point in time.
Version history
References
- Date modified: