Introduction:

In this article we are going to explain what is progress tag in html or why use progress tag in HTML or how to display progress bar on web page with example.

Description:

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 web page. It is mostly used to show the progress bar while uploading a file or saving data on the server.

HTML Progress Tag Example

Let's see HTML progress example without attribute.

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of progress tag</title>     
</head>
<body>    
    <progress></progress>    
</body>
</html>

 

Output:



 

HTML Progress Tag Example

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

 

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of progress tag</title>     
</head>
<body> 
    Downloading progress:
    <progress value="43" max="100"></progress>    
</body>
</html>

 

Output:



 

HTML Progress Tag with JavaScript

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

<!DOCTYPE html>
<html>
<head>
    <title>This is the example of progress tag</title>     
</head>
<body>
    <script>
        var gvalue = 1;
        function save() {
            var progressExample = document.getElementById('progressbar');
            setInterval(function () {
                if (gvalue < 100) {
                    gvalue++;
                    progressExample.value =gvalue;
                }
                save();
            }, 1000);
        }
    </script>
    <progress id="progressbar" min="1" max="100"></progress>
    <br /><br />
    <button onclick="save()">Save</button>
</body>
</html>

Output:

 

  

I hope this article will help to you after reading.

0 comments


Leave a comment

Make sure you enter the (*) required information where indicated. HTML code is not allowed.

you may also like