Create javascript progress bar with percentage
A progress bar is a visual representation of how far a task has progressed. Progress bars are commonly used to display the progress of downloads and uploads. To put it another way, Progress Bars may be used to show the status of anything that is now being worked on. To create a progress bar with percentage we need to follow the following steps:
-
ADD HTML with LABELS
-
ADD CSSS
-
ADD JavaScript
-
Linking all together
Let us discuss each step one by one.
Step 1 - Adding HTML with Labels
To create a progress bar we need to add to div dags in our HTML section. The first div tag is "Progress" and the second is "progressBar". And for labeling, we need to add the label to the div element named "progessBar" as given below:
<div id="Progress">
<div id="progressBar">1%</div>
</div>
Step 2 - Adding CSS
Cascading Style Sheets (CSS) is a language for specifying the appearance of a document written in a markup language like HTML. While creating a progress bar, the width and background color of the progress bar, as well as the progress status in the bar, are all controlled by CSS as given in the code below:
#Progress {
width: 100%;
background-color: black;
}
#progressBar {
width: 1%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
color: white;
}
Step 2 - Adding JavaScript
Using the javascript methods "progress()" and "frame()" the code below produces an animated dynamic progress bar. We just need to create an interval and "onclick" function to generate a working progress bar as given in the code below:
var i = 0;
function progress() {
if (i == 0) {
i = 1;
var elem = document.getElementById("progressBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
Step 4 - Linking HTML, CSS and JS
The following program displays the entire progress bar code, which is done by linking the HTML, CSS, and JavaScript codes:
<!DOCTYPE html>
<html>
<style>
#Progress {
width: 100%;
background-color: black;
}
#progressBar {
width: 1%;
height: 40px;
background-color: orange;
text-align: center;
line-height: 40px;
color: white;
}
</style>
<body>
<h1>Progress Bar</h1>
<div id="Progress">
<div id="progressBar"><b>1%<b></div>
</div>
<br>
<button onclick="progress()">Click Here</button>
<script>
var i = 0;
function progress() {
if (i == 0) {
i = 1;
var elem = document.getElementById("progressBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
elem.innerHTML = width + "%";
}
}
}
}
</script>
</body>
</html>
Output:
The progress animation in the progress bar can be viewed when you click the "click here" button.
Conclusion
To create a progress bar we need to create an HTML with two different div tags with labels and then style it with help of CSS and JS for full working.
