Meter and Progress bars

Meter bar

A meter bar shows a value that is in between the min and the max attributes. A meter bar has other values like low and high attrubutes that will determine the look of the meter bar. The meter bar is usually divided into three sections.

  • The lower part from min to low.
  • The middle part from low to high
  • The upper part from high to max

Now that we have divided the meter bar into three sections we have to set the preferred value. This can be done using the optimum attribute.

  • If the optimum value in the lower section between min to low, then the lower section is the desired section. The middle section is the average section. The upper section is the undesired section.
  • If the optimum value in the middle section between low to high, then the lower section is the average section. The middle section is the desired section. The upper section is also the average section.
  • If the optimum value in the upper section between high to the max, then the lower section is the undesired section. The middle section is the average section. The upper section is the desired section.

The browsers will display the different sections differently by using different colors to match the level of preference.

  • The desired section is shown with a greenish hue.
  • The average section is shown with a yellowish hue.
  • The undesired section is shown with a reddish hue.

The meter element is provided with the value as content for fallback.

<meter min="0" low="20" optimum="50" high="80" max="100">90</meter>

Progress bars

Progress bars are useful for indicating the level of completion of a process. They are usually used for indicating download progress or form completion level. The progress element accepts a value and a max value. The value is provided as content for the progress element for fallback.

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

Usually the value of the progress bar and content are set using JavaScript.