Progress bar and meter

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

The progress bar is used to provide up-to-date feedback on the progress of a workflow or action. Meter is used to display a value in a range when there is a known minimum and maximum value (scalar measurement).

Design and coding

Basic use

Because some browsers do not support the functionality natively, these polyfills emulate the same functionality using generic HTML and WAI-ARIA.

Progress bar

The HTML5 progress element displays the progress of a task.

Appearance

22%

66%

100%

Correct use

Compliance point(s):

  • Provide visual data of the current and maximum value (in a table or aligned with the progress bar)
Incorrect use

Compliance point(s):

  • Displaying a value in a range when there is a known minimum and maximum value (refer to meter)
  • Do not use the .progress .progress-bar classes that come with Bootstrap, as it is not semantically correct
    70%
  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<progress value="22" max="100"><span class="wb-inv">22%</span></progress>
<progress value="198" max="300"><span class="wb-inv">66%</span></progress>
<progress value="500" max="500"><span class="wb-inv">100%</span></progress>

Refer to Progress polyfill for additional options.

Meter

The HTML5 meter element displays a scalar measurement within a known range.

Appearance

3 out of 10

70%

Correct use

Compliance point(s):

  • Provide visual data of the minimum, maximum and current value (in a table or aligned with the progress bar)
    • Include low and high attributes to indicate levels above or below normal amounts, colour of bar will change
      • Too low:
        15% (too low)
        <meter min="100" low="120" value="115" max="200" high="180">15% (too low)</meter>
      • Too high:
        90% (too high)
        <meter min="0" value="90" max="100" high="80">90% (too high)</meter>
Incorrect use

Compliance point(s):

  • Do not display the progress of a task (refer to progress bar)
  • Do not use to represent values that have no maximum range
  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
<meter value="3" min="0" max="10">3 out of 10</meter>
<meter value="0.7">70%</meter>

Refer to Meter polyfill for additional options.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: