HTML Tag Reference - HTML tag <progress>
The <progress> element indicates the completion of a task.
The value attribute defines the current progress. It is on a scale between zero and the value of the max attribute.
When the max attribute is omitted, the scale is between zero and 1. You express progress using floating-point numbers, such as 0.3 for 30%.
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
<progress> |
Yes | 10.0 | Yes | Yes | Yes |
What's new in HTML5
The <progress> tag is new in HTML5.
Attribute
| Attribute | Value | Description |
|---|---|---|
| max | number | Set how much work the task requires in total |
| value | number | Set how much of the task has been completed |
Global Attributes
The <progress> tag supports the Global Attributes in HTML.
Event Attributes
The <progress> tag supports the Event Attributes in HTML.
Default CSS Settings
None.
Example
A demo showing how to use <progress> tag.
<!DOCTYPE HTML>
<html>
<body>
<progress id="myprogress" value="10" max="100"></progress>
<p>
<button type="button" value="30">30%</button>
<button type="button" value="60">60%</button>
<button type="button" value="90">90%</button>
</p>
<script>
var buttons = document.getElementsByTagName('BUTTON');
var progress = document.getElementById('myprogress');
for (var i = 0; i < buttons.length; i++) {
buttons[i].onclick = function(e) {
progress.value = e.target.value;
}; <!-- ww w . j av a 2s .c o m-->
}
</script>
</body>
</html>