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

0 0 1 minute read

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;"> 
        zambiatek 
    </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

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!