Progress bar using html5 meter tag

Meter <meter> tag is a fantastic html5 element, now you can show some report using this tag without even writing any programming code, if just need to have the number, (get the static look of progress bar).

<meter value="20" min="1" max="100"> <meter>

meter tag defines a scalar measurement within a known range, Here is an example of progress bar using html5 meter tag

Note: meter tag should not be used to indicate any progress of any functionality

This is how you can write Code

<meter value="20" min="1" max="100"> <meter>
<br >
<meter value="50" min="1" max="100"> <meter>
<br >
<meter value="70" min="1" max="100"> <meter>
<br >
<meter value="90" min="1" max="100"> <meter>
meter tag attribute

Here are few important properties of meter tag

  • value

    Mandatory attribute, used to specify a value in numbers. The number may be floating point number or integer.

  • max

    specifies the maximum value in the range.

  • min

    specifies the minimum value in the range.

You can think of using this meter element to represent some report, graphic view of data in html5!

HTML5 Tags Examples | Join Web Design Course