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!
