I am going to talk about how to make those progress bar we see everyday in many applications with % completion. For example, if you’re installing any app, it displays % completion of the installation while you’re waiting. It is a great idea for user experience and nowadays almost every application has that kind of progress bar in it.
Let’s start with simple html first.
In the HTML code that’s all we need. Simple two div elements with 2 different ids. We need those div one inside another to create a simple bar through CSS styles. The parent div is the one with id=myProgress and the child div is the one with id=myBar.
Let’s take a look at the CSS styles.
We are adding 100% width to the parent div id and 15% width to the child div id, which will indicate 15% progress out of 100. The child has height so the parent will be adjusted by that much height. All other properties are not required but to make it look nice, I have added those properties. For example, line-height sets the height for the line. Without that property the font won’t have enough space on top of it. (We can use padding instead of it, it’s up to you guys)
After that’s set, we just need to make a function which will increase the width of the child and reaches to 100%.
Let’s take a look at the JS code.
As I’ve just mentioned we needed to add a function in which it’ll increase the width of child div from 15% to 100%.
For that I am getting the current value of child div with getElementById into elem. We have another variable width with 15 as value because we have the size of the child div, 15%. You can start that from 5% but it makes sense to start the progress from where it was left.
Now we are using setInterval method from JavaScript. setInterval() method calls a function at specified intervals which will be in milliseconds.
Syntax for setInterval():
setInterval(function name, time in milliseconds, parameter1, parameter2, ...)setInterval() takes function and time as inputs and they both are required. We have given those 2 inputs as frame and 10.
setInterval() is going to call the function frame every 10 milliseconds until we stop it. To stop that function we need another function called clearInterval(), which is like the key to stop the setInterval() function in JavaScript. But we need to make the function keep going until it reaches 100%. So what we are going to do is we will check if the width of the child div is <=100. If so we will call the function clearInterval() and clears the timer named id. If not, we will keep calling the function frame and increase the value os width until it reaches 100%. We are also changing the texts inside the div by using innerHTML.
That’s it. You can go ahead and attach this to any web application to show the progress of any installation. It will be a nice user experience too to have on your website.
If you don’t want to show the texts inside the progress bar, this is the code for that.
progress bar
