Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Progress Object
The DOM Progress Object represents the <progress> element in an HTML document. This object provides properties and methods to dynamically create and manipulate progress bars using JavaScript, allowing you to build interactive progress indicators for file uploads, form submissions, or loading states.
Syntax
Following is the syntax to create a progress object using JavaScript −
document.createElement("PROGRESS");
You can also access an existing progress element using −
document.getElementById("progressId");
document.getElementsByTagName("progress")[0];
Properties
Following are the key properties of the Progress object −
| Property | Description |
|---|---|
max |
Sets or returns the maximum value of the progress element. Default is 1.0. |
value |
Sets or returns the current value of the progress element. Must be between 0 and max. |
position |
Returns the current position of the progress element (value/max). Read-only property. |
labels |
Returns a NodeList of label elements associated with the progress element. |
Creating a Progress Object
Following example demonstrates how to create a progress object dynamically −
<!DOCTYPE html>
<html>
<head>
<title>DOM Progress Object</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Create Progress Object</h2>
<button onclick="createProgress()" style="padding: 10px 20px; margin: 10px;">Create Progress Bar</button>
<div id="container"></div>
<script>
function createProgress() {
var progressElement = document.createElement("PROGRESS");
progressElement.setAttribute("value", "60");
progressElement.setAttribute("max", "100");
progressElement.style.width = "300px";
progressElement.style.height = "20px";
progressElement.style.margin = "10px";
document.getElementById("container").appendChild(progressElement);
}
</script>
</body>
</html>
Clicking the "Create Progress Bar" button adds a new progress element showing 60% completion.
Accessing Progress Properties
Following example shows how to access and modify progress object properties −
<!DOCTYPE html>
<html>
<head>
<title>Progress Object Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Progress Object Properties</h2>
<progress id="myProgress" value="45" max="100" style="width: 300px; height: 20px;"></progress>
<div style="margin: 20px 0;">
<button onclick="showProperties()" style="padding: 8px 16px; margin: 5px;">Show Properties</button>
<button onclick="updateProgress()" style="padding: 8px 16px; margin: 5px;">Update Progress</button>
</div>
<div id="output" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function showProperties() {
var progress = document.getElementById("myProgress");
var output = document.getElementById("output");
output.innerHTML =
"<strong>Progress Properties:</strong><br>" +
"Value: " + progress.value + "<br>" +
"Max: " + progress.max + "<br>" +
"Position: " + progress.position.toFixed(2) + " (value/max)";
}
function updateProgress() {
var progress = document.getElementById("myProgress");
progress.value = Math.min(progress.value + 15, progress.max);
}
</script>
</body>
</html>
The output displays the current progress properties and allows updating the progress value −
Progress Properties: Value: 45 Max: 100 Position: 0.45 (value/max)
Animated Progress Bar
Following example creates an animated progress bar that updates automatically −
<!DOCTYPE html>
<html>
<head>
<title>Animated Progress Bar</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px; text-align: center;">
<h2>Animated Progress Bar</h2>
<progress id="animatedProgress" value="0" max="100" style="width: 400px; height: 25px;"></progress>
<br><br>
<button onclick="startAnimation()" style="padding: 10px 20px; margin: 5px;">Start</button>
<button onclick="resetProgress()" style="padding: 10px 20px; margin: 5px;">Reset</button>
<p id="status">Progress: 0%</p>
<script>
var interval;
function startAnimation() {
var progress = document.getElementById("animatedProgress");
var status = document.getElementById("status");
clearInterval(interval);
interval = setInterval(function() {
if (progress.value < progress.max) {
progress.value += 2;
status.textContent = "Progress: " + progress.value + "%";
} else {
clearInterval(interval);
status.textContent = "Complete!";
}
}, 100);
}
function resetProgress() {
var progress = document.getElementById("animatedProgress");
var status = document.getElementById("status");
clearInterval(interval);
progress.value = 0;
status.textContent = "Progress: 0%";
}
</script>
</body>
</html>
The animation gradually increases the progress value from 0 to 100, updating every 100 milliseconds.
Progress with Labels
Following example demonstrates using labels with progress elements −
<!DOCTYPE html>
<html>
<head>
<title>Progress with Labels</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Progress with Labels</h2>
<label for="fileProgress">File Upload Progress:</label>
<progress id="fileProgress" value="35" max="100" style="width: 300px; height: 20px;"></progress>
<br><br>
<button onclick="checkLabels()" style="padding: 8px 16px;">Check Labels</button>
<div id="labelInfo" style="margin-top: 15px; padding: 10px; background-color: #e8f4f8;"></div>
<script>
function checkLabels() {
var progress = document.getElementById("fileProgress");
var labelInfo = document.getElementById("labelInfo");
labelInfo.innerHTML =
"<strong>Label Information:</strong><br>" +
"Number of labels: " + progress.labels.length + "<br>" +
"Label text: '" + (progress.labels[0] ? progress.labels[0].textContent : "None") + "'";
}
</script>
</body>
</html>
This shows how to associate labels with progress elements and access them through the labels property.
Conclusion
The DOM Progress Object provides a programmatic way to create and control progress bars in web applications. Using properties like value, max, and position, you can build dynamic progress indicators that respond to user actions or background processes, enhancing the user experience with visual feedback.
243 Views
