Skip to content
Related Articles

Related Articles

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:

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
My Personal Notes arrow_drop_up
Recommended Articles
Page :