HTML <progress> and <meter> Tags

Use <progress> to show how much of a task has been completed, such as an upload or data-processing job. Use <meter> for a numeric measurement within a known range, such as disk usage, a score, or battery level.

The two elements may look similar in a browser, but they represent different information and should not be used interchangeably.

Basic <progress> Example Top ↑

<label for="fileProgress">File upload progress:</label>
<progress id="fileProgress" value="25" max="100">25%</progress>

Here, 25 out of 100 means the task is 25% complete. The text between the tags is useful fallback text, but the element should still have an accessible label.

Attributes of the <progress> Element Top ↑

value Top ↑

The value attribute gives the amount of work completed. It must be between 0 and max. If max is omitted, the range is from 0 to 1.

max Top ↑

The max attribute sets the total amount of work and must be greater than zero. Its default value is 1.

Determinate and Indeterminate Progress Top ↑

Determinate progress Top ↑

<progress value="50" max="100">50%</progress>

Use a determinate progress bar when the application knows how much work has been completed.

Indeterminate progress Top ↑

<label for="loadingProgress">Loading data:</label>
<progress id="loadingProgress">Loading</progress>

Omit value when a task is running but the application cannot yet calculate its percentage of completion.

Using the default max value Top ↑

<progress value="0.5">50%</progress>

Because max is omitted, the default maximum is 1, so 0.5 represents 50%.

Updating Progress with JavaScript Top ↑

Progress elements are commonly updated by JavaScript when an application receives new status information.

const progress = document.getElementById("demoProgress");
const button = document.getElementById("increaseProgress");

button.addEventListener("click", () => {
    progress.value = Math.min(progress.value + 20, progress.max);
    progress.textContent = `${progress.value}%`;
});

For a complete JavaScript example, see managing a progress bar with JavaScript. Plus2net also has a PHP and Ajax progress example.

When to Use <meter> Instead Top ↑

The <meter> element represents a scalar value within a known range. It is appropriate for measurements such as storage usage, ratings, scores, or battery level. It should not be used to represent the completion of a task.

<label for="diskUsage">Disk usage:</label>
<meter id="diskUsage" min="0" max="100" value="70">70%</meter>

Attributes of <meter> Top ↑

• value: Current numeric measurement.
• min: Lower bound of the range. Default is 0.
• max: Upper bound of the range. Default is 1.
• low: Upper boundary of the range considered low.
• high: Lower boundary of the range considered high.
• optimum: Indicates the preferred value or preferred part of the range.

Example with low, high and optimum Top ↑

<label for="batteryLevel">Battery level:</label>
<meter id="batteryLevel" min="0" max="100"
    low="20" high="80" optimum="90" value="50">50%</meter>

The browser can use low, high, and optimum to indicate whether the current measurement is in a preferred or less-preferred part of the range.

<progress> vs <meter> Top ↑

Accessibility and Practical Guidance Top ↑

• Give each progress or meter element a meaningful accessible label. A visible <label> associated with the element is a good default.
• Do not rely only on the bar's color or visual length. Keep the surrounding text clear about what is being measured or processed.
• When progress changes dynamically, update the native element's value rather than replacing it with a purely visual CSS bar.
• For indeterminate progress, omit the value attribute rather than inserting an invented percentage.
• Native appearance varies by browser. Avoid making essential meaning depend on custom styling.

Common Mistakes Top ↑

• Using <meter> for task completion.
• Using <progress> for a static measurement such as temperature or disk capacity.
• Adding a min attribute to <progress>; its minimum is always zero.
• Assuming max without value makes the bar determinate. A missing value means indeterminate progress.
• Providing a visual bar without explaining what the value represents.

Frequently Asked Questions Top ↑

What is the default max value of <progress>? Top ↑

The default max is 1. For example, value="0.5" represents 50% when max is omitted.

How do I create an indeterminate progress bar? Top ↑

Leave out the value attribute. Use this when work is happening but the application cannot calculate completion yet.

Can <progress> have a min attribute? Top ↑

No. The minimum for <progress> is always zero.

What is the difference between progress and meter? Top ↑

<progress> represents task completion. <meter> represents a measurement within a known range.

Can JavaScript change a progress bar? Top ↑

Yes. JavaScript can update the element's value property as new progress information becomes available.

Manage a progress bar with JavaScript

Update progress using PHP and Ajax

Progress bar using jQuery UI

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: