The <progress> tag displays a horizontal progress bar.
This bar visually shows the percent complete value.
The value can be updated with JavaScript as progress is made.
A <progress> bar that indicates 25% complete.
<div>Reindexing files... </div>
<br />
<progress value="25" max="100"> 25% </progress>
The <progress> tag indicates the percent complete of a task.
The value and max attributes help configure the progress bar.
A <progress> bar that is repeatedly filled from 0 to 100% using JavaScript.
0% complete...
<p><span id="progress-text">0</span>% complete...</p>
<progress id="myprogress" value="0" max="100"></progress>
<script>
setInterval( function(){
let value = document.getElementById("myprogress").value;
value = Math.min(value + .1, 100) % 100;
document.getElementById("myprogress").value = value;
document.getElementById("progress-text").innerText = Math.round(value);
}, 10 );
</script>
This table lists the attributes for the <progress> element.
| Attribute | Value | Description |
|---|---|---|
| max | number | When max is reached the task is complete. |
| value | number | Current task progress value. |
| id | identifier | Defines a unique identifier for the progress element. |
| class | classnames | Sets one or more CSS classes to be applied to the progress element. |
| style | CSS-styles | Sets the style for the progress element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the progress element is hidden. |
| title | text | Sets a title that displays as a tooltip. |
For additional global attributes see our global attributes list.
Here is when <progress> support started for each browser:
 Chrome
|
8.0 | Dec 2010 |
 Firefox
|
16.0 | Oct 2012 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
11.0 | Dec 2010 |
 Safari
|
6.0 | Jul 2012 |
