The progress element can be used to indicate the gradual completion of a task. It has two local attributes: value, max, form .
The value attribute defines the current progress, which is 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%.
<!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;
};
}
</script>
</body>
</html>