Question:

Describe the function of the meter and progress tags and give an example usage of each of these tags.

Meter tag

The first tag we will talk about is the meter tag which is used for things such as disk space taken and battery bar, not to get confused with progess bars for that we will use <progress> tag. Below are some examples:

  • meter tag without any attributes:
<meter></meter>


  • meter tag without any attributes:
<!-- the value attribute sets how much bar is filled -->
<meter min="0" max="100" value="50">50% power</meter>
  • meter tag without any attributes:
<!-- The low and high attributes change the color of bar if value is lower or higher -->
<meter min="0" max="100" value="40" low="50" high="90">50% power</meter>
low value

Progress

The progress tag looks different from the meter tag and also has a different purpose. The tag is used to show the percentage of task is completed like this:

80%:

Of course we would use javascript if we were going to use it in an application to get the progress bar to adjust values.