HTML Progress Tag

HTML <progress> tag is used to display the progress of a task. It provides an easy way for web developers to create progress bar on the website. It is mostly used to show the progress of a file uploading on the web page.

The HTML progress tag is new in HTML5 so you must use new browsers.

Attributes of HTML Progress Tag

HTML <progress> tag supports the global and event attributes as well as 2 specific attributes.

Tag	Description
value	It defines that how much work the task has been completed.
max	It defines that how much work the task requires in total.

The progress tag should be used to represent progress of a task only, not for just a gauge (disk pace usage). For such purpose, <meter> element is used.

HTML Progress Tag Example

Let’s see HTML progress example without attribute.

<progress></progress>

Output:

Let’s see the progress example with value and max attributes.

<progress value="43" max="100"></progress>

Output:Downloading progress:

Styling Progress Bar

You can apply CSS code on progress tag.

progress{  

  width: 300px;  

  height: 30px;  

}

Output:

HTML Progress Tag with JavaScript

The <progress> tag should be used in conjunction with JavaScript to display the progress of a task.

<script>  

var gvalue=1;  

function abc(){  

 var progressExample = document.getElementById ('progress-javascript-example');  

     setInterval (function ()  

    {   

                 if(gvalue<100){  

                    gvalue++;  

                    progressExample.value =gvalue;    

                  }  

                 abc();              

      }, 1000);  

}  

</script>  

<progress id="progress-javascript-example" min="1" max="100"></progress>    

<br/><br/>  

<button onclick="abc()">click me</button>

Output: