HTML <progress> tag

HTML <progress> tag : Definition


• The HTML <progress> element represents that how much of the task that has been completed of the ongoing assigned task.

• This <progress> element uses two attributes max and value and these attributes are used to define how much progress(value) has been done and left to be completed(max).


Html <progress> tag example 1:

<!DOCTYPE html>
<html>
<body>
  <label for="file">File Downloaded: </label>
  <progress id="file" value="65" max="100" title="65%"> 65% </progress> 




</body>
</html>


Output :


 
  65%


Html <progress> tag example 2:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML progress tag example</title>
</head>
<body>
    <h2>File Download Progress</h2>
  <p>Downloaded: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>
  <script type="text/javascript">
    var i = 0;
    var progressBar = document.getElementById("bar");
    function countNumbers(){
      if(i < 100){
        i = i + 1;
        progressBar.value = i;
        // For browsers that don't support progress tag
        progressBar.getElementsByTagName("span")[0].textContent = i;
      }
      // Wait for sometime before running this script again
      setTimeout("countNumbers()", 500);
    }
    countNumbers();
  </script>
</body>
</html>

Output :

File Download Progress

  
    Downloaded: 0%