Progress polyfill (progress bar)

Questions or comments?

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.

Use when

Working example

Task in progress

<progress value="25" max="100" />

Completed task

<progress value="50" max="50" />

Task of indeterminate progress

<progress />
or 
<progress max="50" />

How to implement

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.

Configuration options

Configuration options available for the progress element (HTML5 specification)

Events

Event Trigger What it does
wb-init.wb-progress Triggered manually (e.g., $( "progress" ).trigger( "wb-init.wb-progress" );). Used to manually initialize the progress polyfill. Note: The progress polyfill will be initialized automatically unless the progress element is added after the page has already loaded.
wb-update.wb-progress Triggered manually (e.g., $( "progress" ).trigger( "wb-update.wb-progress" );). Used to manually update the progress polyfill.
wb-ready.wb-progress (v4.0.5+) Triggered automatically after the progress polyfill initializes. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native progress support. Used to identify where the progress polyfill initialized (target of the event) 
$( document ).on( "wb-ready.wb-progress", "progress", function( event ) {
});
$( "progress" ).on( "wb-ready.wb-progress", function( event ) {
});
wb-updated.wb-progress (v4.0.5+) Triggered automatically after the progress polyfill is updated. Note: This event will only be triggered if the polyfill is loaded. The polyfill will not load for browsers with native progress support. Used to identify where the progress polyfill initialized (target of the event) 
$( document ).on( "wb-updated.wb-progress", "progress", function( event ) {
});
$( "progress" ).on( "wb-updated.wb-progress", function( event ) {
});
wb-ready.wb (v4.0.5+) Triggered automatically when WET has finished loading and executing. Used to identify when all WET plugins and polyfills have finished loading and executing. 
$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Progress polyfill source code on GitHub

Date modified: