How to set/get the value of Progress Bar using JavaScript ?

In this article, we are creating the progress bar of a task by using a <progress> tag. The <progress> tag is used to represent the progress of a task. It is also defined how much work is done and how much is left to download a thing. It is not used to represent the disk space or relevant query.

The progress object in HTML DOM is used to represent the HTML <progress> element. The <progress> element can be accessed by using getElementById() method.

Property Values:

level: It returns the list of progress bar.
max: It is used to set or return the progress bar value of max attribute.
value: It represent the amount of work are already completed.
position: It returns the current position of progress bar.

Example:

HTML

<!DOCTYPE html> 

<html> 

<head> 

    <title> 

        How to set and get the value of 

        Progress Bar using JavaScript ? 

    </title> 

</head> 

<body style="text-align: center;"> 

    <h1 style="color:green;"> 

        GeeksforGeeks 

    </h1> 

    <h2> 

        Set and Get the value of Progress 

        Bar using JavaScript 

    </h2> 

    <P id="GFG"> 

        Downloading progress for a song: 

    </p> 

    <button onclick="myGeeks()"> 

        Submit 

    </button> 

    <script> 

        function myGeeks() { 

            // Create a progress element 

            var g = document.createElement("progress"); 

            // Set the value of progress element 

            g.setAttribute("value", "57"); 

            // Set the maximum value of progress element 

            g.setAttribute("max", "100"); 

            // Get the value of progress element 

            document.getElementById("GFG").appendChild(g); 

        }  

    </script> 

</body> 

</html>

Output:

Before Button Click:

After Button Click:

Supported Browsers:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions