HTML progress Tag

HTML <progress> element is employed to exhibit the advancement of a task. It offers a convenient method for web developers to generate a progress bar on the site. This element is commonly utilized to indicate the progression of a file upload process on the webpage.

The HTML progress element is a recent addition in HTML5, therefore requiring modern web browsers for compatibility.

Attributes of HTML Progress Tag

HTML <progress> element enables the usage of both global and event attributes in addition to 2 unique attributes.

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 examine an HTML advancement illustration without any attributes.

<progress></progress>

Output:

Let's examine an illustration showcasing the implementation of the value and max attributes.

Downloading progress:

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

Output:

Styling Progress Bar

You can apply CSS code on progress tag.

progress{

  width: 300px;

  height: 30px;

}

Output:

HTML Progress Tag with JavaScript

The <progress> element is best utilized alongside JavaScript to showcase the advancement of a specific 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:

Supporting Browsers