<progress> Tag in HTML – Progress Bar & Live Example

Quick facts

Category	Flow content, phrasing content, labelable, palpable content
Content model	Phrasing content, but no <progress> inside
Tag omission	Neither the start nor the end tag can be omitted
Permitted parents	Any element that accepts phrasing content
DOM interface	`HTMLProgressElement`

Syntax

Live example

Edit the code below and watch the preview update instantly.

index.html

Preview

Open in Full Editor →

Attributes

Attribute	Description
value	How much of the task is done, between 0 and max. Leave it out for an indeterminate bar
max	The total amount of work. Must be greater than 0; defaults to 1

Common examples

An upload progress bar

Update the value as data arrives; the bar fills in automatically.

<label for="up">Uploading photo:</label>
<progress id="up" max="100" value="0">0%</progress>

<script>
  let v = 0;
  const t = setInterval(() => {
    up.value = v += 10;
    if (v >= 100) clearInterval(t);
  }, 300);
</script>

Steps in a form

Show how far someone is through a multi-step checkout.

<p id="step-label">Step 2 of 4</p>
<progress max="4" value="2" aria-labelledby="step-label"></progress>

A styled progress bar

Browsers use their own look; vendor pseudo-elements and accent-color let you restyle it.

<style>
  progress { width: 100%; height: 12px; accent-color: #7b61ff; }
  progress::-webkit-progress-bar { background: #eee; border-radius: 6px; }
  progress::-webkit-progress-value { background: #7b61ff; border-radius: 6px; }
  progress::-moz-progress-bar { background: #7b61ff; }
</style>

<progress> vs a <div> progress bar

Many sites build progress bars from two <div>s: a grey track and a coloured inner bar whose width changes. It looks the same, but screen readers see nothing unless you add role="progressbar" and keep aria-valuenow, aria-valuemin and aria-valuemax updated yourself.

<progress> has that meaning built in — screen readers announce the percentage automatically. The div approach gives total design freedom; the element is less work and accessible by default.

	<progress>	<div> bar
Accessible by default	Yes	No (needs ARIA)
Styling	Limited, browser-specific	Full control
Code needed	One element	Two divs + ARIA + JS

Common mistakes to avoid

Using progress for measurements. Disk usage or a rating isn’t “progress”; use <meter>.
No label. Add a <label> or aria-label so people know what is loading.
A value larger than max. It’s clamped to full, which can hide bugs in your code.
Setting value="0" when progress is unknown. Leave value out to show an “indeterminate” busy animation instead.

Accessibility & SEO tips

Also show the percentage as text (“45%”) next to the bar, for people who can’t judge the bar length.
For long waits, tell people what is happening (“Uploading 3 of 10 photos”) — progress bars reduce frustration and abandonment.
Use aria-busy="true" on the area being updated while it loads.
Respect prefers-reduced-motion by toning down animated or striped bars for visitors who prefer less movement.

Browser support

Supported in all modern browsers, including Chrome, Edge, Firefox, Safari and their mobile versions. It was introduced with HTML5, and only very old browsers such as Internet Explorer 8 needed workarounds.

Related tags

Frequently asked questions

What is the difference between <progress> and <meter>?

<progress> shows how far a task has advanced toward completion. <meter> shows a measurement within a known range that isn't a task, like disk usage, a test score or battery level.

How do I make an indeterminate (loading) progress bar?

Leave out the value attribute: <progress></progress>. Browsers show an animated bar meaning "working on it". Add value with JavaScript once you know how far along the task is.

How do I change the color of a progress bar?

Use accent-color: green; for a quick change in modern browsers. For full control, set appearance: none and style ::-webkit-progress-bar and ::-webkit-progress-value (Chrome, Safari) plus ::-moz-progress-bar (Firefox).

How do I update a progress bar with JavaScript?

Set its value property, for example bar.value = 60;. If max is 100, that shows 60% complete.

How do I show the percentage inside the bar?

The bar can't contain visible text. Place a <span> next to it, or position text over it with CSS, and update both from JavaScript.

Can I animate the progress bar?

Changes to value jump instantly. For smooth movement, update the value in small steps with requestAnimationFrame, or use a div-based bar with a CSS transition.

What are the default min and max of <progress>?

The minimum is always 0 and max defaults to 1, so value="0.5" means halfway. Set max="100" to work with percentages.

Can a <progress> bar go backwards?

Yes. Lowering the value shrinks the bar, but in a real task progress should only move forward, or visitors lose trust in it.