← 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
Syntax
markup 
<progress value="current" max="total"></progress>
<meter value="current" min="min" max="max"></meter>

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.
  • Accepted attributes:
  • value — number between 0 and max
  • max — number greater than 0 (default 1)
  • Omit value for an indeterminate bar
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.
  • Accepted attributes:
  • value — current number
  • min — lower bound (default 0)
  • max — upper bound (default 1)
  • low — upper limit of the low range
  • high — lower limit of the high range
  • optimum — the best value
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.
  • Accepted attributes:
  • low — upper limit of the low range
  • high — lower limit of the high range
  • optimum — the ideal value
  • min <= low <= high <= max
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>
Live Example
Related Topics

HTML Icon Fonts · HTML Output Element · HTML Web Fonts · HTML Datalist

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
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.