YogeshChauhan . com

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 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

How to enable GD library support for PHP on windows server?PHPHow to Commit and Rollback Changes in SQL?SQL/MySQL:in-range and :out-of-range selector in CSSCSSWhat’s a Log File and What are Log File Monitors?MiscHow to add Date and Time picker in HTML and get the values using JavaScript?HTMLHow to get Current Year, Month and Date in JavaScript?JavaScript