HTML elements meter and progress

I was surprised to learn that there are quite fancy html element. As an example, here is the <meter> element:

Code for the above:

<meter id="buffer" min="0" max="100" low="50" high ="80" optimum="100" value="30"></meter>
<meter id="buffer" min="0" max="100" low="50" high ="80" optimum="100" value="70"></meter>
<meter id="buffer" min="0" max="100" low="50" high ="80" optimum="100" value="90"></meter>

And here is the <progress> element:

  • 10%
  • 90%

Code for the above:

<progress id="compute" max="100" value="10">10%</progress>
<progress id="compute" max="100" value="90">90%</progress>

References

You can read more about the elements here: