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

Last Updated : 22 Dec, 2020

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:

<!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>

 
<!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>