HTML5 Progress and Meter

HTML5 provides two useful elements for displaying numeric information: <progress> and <meter>.

Although they look similar, they represent different things. <progress> shows the completion of a task, while <meter> shows a value within a known range.

1. Progress vs Meter

2. What is the progress Element?

The <progress> element represents the completion progress of a task.

For example, it can show how much of a course has been completed, how much of a file has uploaded, or how far a process has progressed.

3. Basic progress Example

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

Output

Here, the current progress is 60 and the maximum value is 100.

4. Understanding value and max

The value attribute represents the current amount of progress, while max represents the total amount.

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

This represents 75 out of 100 units of progress.

5. Progress without a Value

A progress element without a value can represent an indeterminate operation whose completion percentage is not currently known.

<progress>
</progress>

6. Real-Life Examples of progress

• File upload progress
• Course completion
• Installation progress
• Download progress
• Multi-step process completion

7. Course Progress Example

<p>
    HTML Course Progress
</p>

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

8. Upload Progress Example

A progress element can visually represent the completion of an upload.

<label>
    Upload Progress
</label>

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

9. What is the meter Element?

The <meter> element represents a scalar value within a known range, or a value that can be compared against defined minimum and maximum values.

It is useful for showing things such as a score, storage usage, rating, or another measured value.

10. Basic meter Example

<meter value="70"
       min="0"
       max="100">
    70
</meter>

Output

11. meter with min and max

The min and max attributes define the range of the measured value.

<meter value="6"
       min="0"
       max="10">
    6
</meter>

12. meter with low and high

The low and high attributes define thresholds that help describe which values are considered lower or higher within the range.

<meter value="70"
       min="0"
       max="100"
       low="30"
       high="80">
    70
</meter>

13. meter with optimum

The optimum attribute indicates the preferred or ideal value within the meter's range.

<meter value="85"
       min="0"
       max="100"
       optimum="90">
    85
</meter>

14. Example: Storage Usage

A meter can represent the amount of storage currently being used.

<p>
    Storage Used
</p>

<meter value="70"
       min="0"
       max="100">
    70%
</meter>

15. Progress vs Meter

16. Simple Difference

Think about downloading a file.

If the question is: "How much of the download is completed?" use <progress>.

If the question is: "How much storage is being used?" use <meter>.

17. Common Mistakes

Mistake 1: Using meter for task progress

If the value represents completion of a process, use <progress>.

Mistake 2: Using progress for a static measurement

If you are displaying a measurement such as a score or storage usage, <meter> may be more appropriate.

Mistake 3: Forgetting the range

When using these elements, make sure the values and range accurately represent what you want the user to understand.

18. Best Practices

• Use <progress> for task completion.
• Use <meter> for measurements within a known range.
• Set meaningful minimum and maximum values for meters.
• Use low, high, and optimum when thresholds are useful.
• Keep the surrounding text clear so users understand what the value represents.

19. Practice Example

Create a page containing:

• A course completion progress bar at 75%.
• A test score meter showing 8 out of 10.
• A storage meter showing 65 out of 100.

<p>
    Course Progress
</p>

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


<p>
    Test Score
</p>

<meter value="8"
       min="0"
       max="10">
    8
</meter>


<p>
    Storage Used
</p>

<meter value="65"
       min="0"
       max="100">
    65
</meter>