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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks 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!