Progress polyfill (progress bar)

Looking for WET v3.1?

WET v4.0 is now the current version. There is a new location for the current page in WET v3.1.

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., $elm.trigger( "wb-init.wb.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.

Source code

Progress polyfill source code on GitHub

Date modified: