Yogesh Chauhan's Blog

How to create a Progress Bar using JavaScript?

in JavaScript on October 25, 2019

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.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
Default Values in SCSS (Sass)SCSSFull and Partial ROLLUP in Postgresql with ExamplesPostgresHow to change style of all direct children of an element using jQuery?jQueryHow to get ACF values from custom post type?WordPressHow to create a Progress Bar using JavaScript?JavaScriptJavaScript arrays: a separate data type or Objects?JavaScript