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:

How to use Progress bar in html


 

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:

How to use Progress bar in html


 

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:

 

  How to use Progress bar in html

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