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