This tutorial will guide you through building a Javascript Progress Bar With Percentage indicator. A progress bar is a visual element used to show the progression of a task, like uploading a file or completing a download, and displaying the percentage completed offers users a clear understanding of the process.
Setting up the HTML Structure
First, we’ll construct the basic HTML for our progress bar. This includes the container, the actual progress bar element, a button to trigger the progress, and a span to display the percentage.
<body>
<div class="container">
<h1>Progress Bar (pure JavaScript)
<br> "application on function closure in js"</h1>
<div class="parent">
<div class="child"></div>
</div>
<button class="clk">click</button>
<span class="prog">0%</span>
</div>
Styling with CSS
Next, we’ll use CSS to style our progress bar, making it visually appealing and responsive. We’ll define the colors, sizes, and layout of the elements.
* {
margin: 0;
border: 0;
padding: 0;
font-family: sans-serif
}
.container {
width: 70%;
max-width: 800px;
margin-top: 50px;
margin-left: 50px;
position: relative
}
.parent {
width: 100%;
background-color: #c1c1c1;
height: 30px;
margin-top: 25px;
margin-bottom: 20px
}
.child {
width: 0%;
background-color: #53b453;
height: 100%
}
.clk {
padding: 10px 20px;
font-size: 20px;
color: white;
background-color: #53b453;
cursor: pointer
}
.clk:hover {
background-color: #c1c1c1;
}
.prog {
position: absolute;
display: block;
right: 0
}
@media screen and (max-width: 700px) {
.container{
text-align: center;
margin:auto;
margin-top: 40px
}
h1{
font-size: 20px
}
.prog{
bottom: 20px
}
}
Implementing the JavaScript Logic
Now, we’ll use JavaScript to control the animation and update the percentage display. This involves selecting the HTML elements, defining the animation logic, and attaching it to the button click event.
var child = document.getElementsByClassName("child")[0],
clkBut = document.getElementsByClassName("clk")[0],
progSpan = document.getElementsByClassName("prog")[0];
//*************************
var q = (function () {
var width = 0;
return function () {
var x = setInterval(function () {
if (width === 100) {
clearInterval(x);
} else {
width++;
child.style.width = width + "%";
progSpan.innerHTML = width + "%";
}
}, 15);
}
})();
clkBut.onclick = q;
Header Assets
It is a good practice to include all necessary header assets.
Footer Assets
It is a good practice to include all necessary footer assets.
By following these steps, you’ve successfully created a Javascript Progress Bar With Percentage display that you can customize and integrate into your projects.
