← Back to HTML Course | Chapter 10: Reference & Interview Prep | Lesson 13 of 20

HTML Progress & Meter

Some numbers only make sense when you can see them visually. A file that is '43% uploaded' is far easier to understand as a filling bar than as plain text, and a battery at low charge is instantly recognizable as low when shown as a small colored gauge. HTML gives you two built-in elements for exactly these situations. The <progress> element shows how far a task has advanced toward completion, like a download or a multi-step form. The <meter> element shows a value within a known range, like disk usage or a rating score. Both elements are rendered natively by the browser, meaning you get a working visual gauge without writing any custom drawing code yourself.

In this page:

  1. The <progress> Element
  2. Styling and Updating Progress Dynamically
  3. The <meter> Element
  4. Meter Ranges: Low, High, and Optimum
  5. Progress vs Meter: When to Use Each

The <progress> Element

The <progress> element displays a bar that fills up to show how much of a task has been completed. It takes a value attribute for the current amount and a max attribute for the total amount needed.

Note: Leave off the value attribute entirely to show an indeterminate, animated progress bar while a task's duration is unknown.

Warning: Without a max attribute, the browser assumes a maximum of 1, which can produce a nearly full bar if you pass a large value by mistake.

Example: The <progress> Element

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

Styling and Updating Progress Dynamically

The <progress> element can be restyled with CSS and its value can be changed at any time using JavaScript, letting you tie the bar directly to a real task like a file upload or a multi-step wizard.

Note: Update the value attribute gradually rather than jumping straight to 100, so the animation feels smooth to visitors.

Warning: Styling progress bars across browsers can be inconsistent, since each browser renders the default track and fill with its own internal elements.

Example: Styling and Updating Progress Dynamically

markup 
<progress id="bar" value="30" max="100"></progress>
<script>
  document.getElementById('bar').value = 60;
</script>

The <meter> Element

The <meter> element displays a gauge for a known, fixed-range value, such as disk space used or a survey rating. Unlike <progress>, it is meant for measurements rather than ongoing task completion.

Note: Use <meter> for any value that has a defined minimum and maximum, even if that value never changes.

Warning: Do not use <meter> for an open-ended task like a file upload, since it is designed for bounded measurements, not progress toward an unknown finish.

Example: The <meter> Element

markup 
<meter value="0.6" min="0" max="1">60%</meter>

Meter Ranges: Low, High, and Optimum

The <meter> element accepts low, high, and optimum attributes, which let the browser color the gauge differently depending on whether the current value falls in a good, acceptable, or poor range.

Note: Set optimum close to whichever end of the range represents the best outcome, so browsers can color the gauge meaningfully.

Warning: Leaving out low, high, and optimum means every value renders in the same neutral color, even values that represent a problem.

Example: Meter Ranges: Low, High, and Optimum

markup 
<meter value="80" min="0" max="100" low="33" high="66" optimum="100"></meter>

Progress vs Meter: When to Use Each

Choosing between <progress> and <meter> comes down to what the value represents: use <progress> for a task moving toward completion, and <meter> for a static measurement within a known range.

Note: Ask whether the value will eventually reach 100% and then disappear or reset; if so, it is progress, otherwise it is a meter reading.

Warning: Mixing up the two elements can confuse assistive technology, since each has different expected semantics for screen readers.

Example: Progress vs Meter: When to Use Each

markup 
<progress value="50" max="100"></progress>
<meter value="7" min="0" max="10"></meter>
Common Mistakes
  1. Using <progress> to display a static score or rating, when <meter> is the correct element for a fixed-range value.
  2. Forgetting to update the value attribute with JavaScript, leaving the progress bar frozen even as the real task continues.
  3. Omitting the max attribute on <progress>, which defaults to 1 and can make percentages calculate incorrectly.
Chapter Summary
  • The <progress> element visually represents how far a task has advanced toward completion.
  • The <meter> element visually represents a static value inside a known minimum and maximum range.
  • Both elements can be updated dynamically with JavaScript by changing their value attribute.
Browser Support

Both <progress> and <meter> are supported natively in every modern browser.

🔒

Chapter Quiz — Complete all 20 topics to unlock

0/20 topics done

Complete these topics first:

← Previous Lesson HTML Icon Fonts Next Lesson → HTML Output Element

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.