Progress bar and meter

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.

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.