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;"> neveropen </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, neveropen 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!
