1. home
  2. Tutorials
  3. Tutorial
Edit

HTML progress Tag

The <progress> tag represents the progress of the work or task. It can be used in conjunction with JavaScript to display the progress of a task or process as it is underway.
Example of Code     
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML progress Tag</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>  
    var i = 0;
        var progressBar = document.getElementById("bar");
        function countNumbers(){
            if(i < 100){
                i = i + 1;
                console.log(i);
                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>
</head>
<body>
    <h2>Task Progress</h2>
    <p>Progress: <progress id="bar" value="0" max="100"><span>0</span>%</progress></p>    
</body>
</html>
Output
An Example of HTML progress Tag

Task Progress

Progress: 0%