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>
  <label for="file">File Downloaded: </label>
  <progress id="file" value="65" max="100" title="65%"> 65% </progress> 


Output :


Html <progress> tag example 2:

<!DOCTYPE html>
<html lang="en">
<title>HTML progress tag example</title>
    <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);

Output :

File Download Progress


Downloaded: 0%