Open In App

HTML | DOM Progress Object

Improve
Improve
Like Article
Like
Save
Share
Report

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: 
 

  • labels: It returns the list of progress bar labels.
  • max: It is used to set or return the progress bar value of the max attribute.
  • value: It represents the amount of work that is already completed.
  • position: It returns the current position of progress bar.

Syntax: 
 

document.getElementById("ID");

Where ID is assigned to the <progress> element.
Example 1: 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM Progress Object
        </title>
    </head>
     
    <body>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
         
        <h2>DOM Progress Object</h2>
         
        Downloading progress for a song:
        <progress id = "GFG" value = "57" max = "100">
        </progress>
         
        <br><br>
         
        <button onclick = "myGeeks()">
            Submit
        </button>
         
        <p id = "sudo"></p>
 
 
         
        <script>
            function myGeeks() {
                var pr = document.getElementById("GFG").value;
                document.getElementById("sudo").innerHTML = pr;
            }
        </script>
    </body>
</html>                             


Output: 
Before Click on the Button: 
 

After Click on the Button: 
 

Example 2: Progress Object can be created by using the document.createElement Method. 
 

html




<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML DOM Progress Object
        </title>
    </head>
     
    <body>
        <h1 style = "color:green;">
            GeeksForGeeks
        </h1>
         
        <h2>DOM Progress Object</h2>
         
        <P id = "GFG">
            Downloading progress for a song:
        </p>
 
  
         
        <button onclick = "myGeeks()">
            Submit
        </button>
         
        <script>
            function myGeeks() {
                var g = document.createElement("PROGRESS");
                g.setAttribute("value", "57");
                g.setAttribute("max", "100");
                document.getElementById("GFG").appendChild(g);
            }
        </script>
    </body>
</html>                             


Output: 
Before Click on the Button: 
 

After Click on the Button: 
 

Supported Browsers: The browser supported by DOM Progress Object are listed below: 
 

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

 



Last Updated : 23 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads