Describe the function of the meter and progress tags and give an example usage of each of these tags.
meter and progress elements are useful to express visually the current state of a numeric range. Eg: Loading bars, heat control and any sort of gauges.
The progress element is visually seen as a progress bar, which is composed of two main attributes:
- value: Defines the current progress bar value.
- max: Define the limit which the bar will be considered 100% completed.
min attribute is not needed, min is always 0.
<progress id="progress" value="10" max="100">
<!-- Fallback message to be diplayed in case the user's browser can't render the element. -->
The current percentual is 10%.
</progress>The example above is a 10% complete progress bar. So 1/10 of the bar will be filled.
In the next example you will see a progress bar 50% filled with 250 value.
<progress id="progress" value="250" max="500">
<!-- Fallback message to be diplayed in case the user's browser can't render the element. -->
Half of the bar is filled.
</progress>
This happens because 250 (value) is 50% of 500 (max), so the browser knows it needs to be rendered with half bar filled.
It's important to remember that if value attribute is higher than the max attribute, the browser will render the progress 100% filled, not more than that.
meter works almost the same as progress bar works, with the only difference it supports color schemes to inform the gauge quality.
For instance, an battery charge gauge where:
- 25% below is considered low. - Red
- 25% ~ 50% is considered regular. - Yellow
- %51 ~ 100% is considered good. - Green
<span>Battery charge is low: 10%</span>
<meter id="meter" min="0" low="25" high="51" optimum="100" max="100"
value="10">Your browser does not support Meter element</meter>
<span>Battery charge is regular: 50%</span>
<meter id="meter" min="0" low="25" high="51" optimum="100" max="100"
value="50">Your browser does not support Meter element</meter>
<span>Battery charge is good: 80%</span>
<meter id="meter" min="0" low="25" high="51" optimum="100" max="100"
value="80">Your browser does not support Meter element</meter>To make the example above possible, we had to use these meter attributes:
- low: If
metervalue is lower than low, it will be rendered as a red bar. - high: If
metervalue is lower than high and and higher than low, it will be rendered as a yellow bar. - optimum: If
metervalue is greater than or equals high or optimum, it will be rendered as a green bar.
Besides these elements being new to HTML 5 they're now supported by almost all modern browsers. Except IE which does not support meter element. Keep that in mind when using them.
If you want to access the entire example, please visit this codepen.
Guilherme Soldateli
11/04/2017
Career Path 3: Modern Frontend Developer