Progress and meter

Learn the difference between <progress> and <meter>.

Progress bars with progress

To show how far a task has progressed you use the <progress> tag: file upload, survey steps, setup bar. The value attribute is the current state, max is the total target.

Without value the browser draws an indeterminate bar: animated, used when the share done is unknown. It fits tasks whose duration cannot be predicted.

Measurement values with meter

To show a measurement within a known range you use the <meter> tag: disk usage, score, battery level. value is the current measure; min and max set the range.

With low, high and optimum you mark colour zones. For example, low disk shows red, a healthy level green. Progress is for tasks, meter is for measures.

Exercise Write a progress and a meter tag

Add a <progress> tag to body; set value to 40 and max to 100. Below it add a <meter> tag with value of 7 and max of 10. Close both with their closing tags.

Show example solution

<body>
  <progress value="40" max="100"></progress>
  <meter value="7" max="10"></meter>
</body>

Test yourself

Which statement is correct?
- progress shows the completion state of a task
- meter can only show a percentage value
- progress takes a min attribute
- meter does not use a value attribute
Show answer

progress shows the completion state of a task — Correct. progress shows a task's completion as a bar.

Complete the opening tag

<____ value="70" max="100"></progress>

Show answer

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

Match each tag and attribute to its role

progress

Task completion
meter

Known measurement
value

Current state
max

Upper bound

Next lesson: Input attributes

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies