Code
You are here: Home > HTML Reference > Elements > progress element
Usage
The progress element represents the completion progress of a task. The progress is either indeterminate, indicating that progress is being made but that it is not clear how much more work remains to be done before the task is complete (e.g. because the task is waiting for a remote host to respond), or the progress is a number in the range zero to a maximum, giving the fraction of work that has so far been completed.
Here is a snippet of a Web application that shows the progress of some automated task:
<section>
<h2>Task Progress</h2>
<p>Progress: <progress><span id="p">0</span>%</progress></p>
<script>
var progressBar = document.getElementById('p');
function updateProgress(newValue) {
progressBar.textContent = newValue;
}
</script>
</section>
Attributes
- value
- max
- common attributes
Browser compatibility
Compatibility table legend
| Test | IE8 | IE7 | IE6 | FF3 | FF2 | Saf3 | Op9 | Chrome | |:---------|:--------|:--------|:--------|:--------|:--------|:---------|:--------|:-----------| | appears in DOM | Y | Y | Y | Y | Y | Y | Y | Y | | applies style | N | Y | Y | Y | Y | Y | Y | Y |