Progress polyfill (progress bar)

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

• Displaying the progress of a task

Working example

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

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

<progress />

<progress max="50" />

• English examples
• French examples

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

$( document ).on( "wb-ready.wb-progress", "progress", function( event ) {
});

$( "progress" ).on( "wb-ready.wb-progress", function( event ) {
});

$( document ).on( "wb-updated.wb-progress", "progress", function( event ) {
});

$( "progress" ).on( "wb-updated.wb-progress", function( event ) {
});

$( document ).on( "wb-ready.wb", function( event ) {
});

Source code

Progress polyfill source code on GitHub