Showing 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 0 and 1. You express progress using floating-point numbers, such as 0.3 for 30%.

        <progress id="myprogress" value="10" max="100"></progress> 
            <button type="button" value="30">30%</button> 
            <button type="button" value="60">60%</button> 
            <button type="button" value="90">90%</button> 
            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 =; 
Click to view this demo.
  HTML CSS Book