Creating a progress bar using JavaScript
M
Software Engineer | Full Stack Web developer | Javascript | React.js | Python | PHP | AWS | Docker
Creating a progress bar using JavaScript
A progress bar is used to represent the progress of any running task. Progress bars are generally used to show the status of uploading and downloading. In other words, we can say that progress bars can be used to depict the status of whatever is going on.
To create a basic progress bar using JavaScript, the following steps should be performed:
- Create an HTML structure for your progress bar:
- Link HTML, CSS and JavaScript elements
- Creating a Labeled Progress Bar
Below is the complete program using HTML, CSS, and JavaScript to create a tagged progress bar:
<!DOCTYPE html>
<html>
<style>
#Progress_Status {
width: 50%;
background-color: #ddd;
}
#myprogressBar {
width: 1%;
height: 35px;
background-color: #4CAF50;
text-align: center;
line-height: 32px;
color: black;
}
</style>
<body>
<h3>Example of Progress Bar Using JavaScript</h3>
<p>Download Status of a File:</p>
<div id="Progress_Status">
<div id="myprogressBar">1%</div>
</div>
<br>
<button onclick="update()">Start Download</button>
<script>
function update() {
var element = document.getElementById("myprogressBar");
var width = 1;
var identity = setInterval(scene, 10);
function scene() {
if (width >= 100) {
clearInterval(identity);
} else {
width++;
element.style.width = width + '%';
element.innerHTML = width * 1 + '%';
}
}
}
</script>
</body>
</html>
