Progress bar is created by plain JavaScript

Today I am going to write about how you can create the Progress Bar by using Plain JavaScript. To create this, you just need some knowledge about HTML, CSS, and JavaScript.

How do I create this ?

We create two divs, one is a progress bar and other is its wrapper and the first div would exist inside the wrapper div. After that, we give the width, height, and background to parent div.

Now we apply the height and background color to inner progress bar div and 1px width for this div at very first.

Now we increase inner div’s width at given time of interval, suppose we increase this width by 1 pixel at 50 milliseconds.  So it gives us the progress bar effect.

For live Demo just

Let’s understand this with the code.

By above HTML code, I have just created the progress bar wrapper div.

I have achieved this tool by creating the JavaScript module named progressBar.

var progressBar = {
/** These are default values for progressbar **/
start : 0,
end : 100,
speed : 50,
style : { width : 300, height : 30, bgColor : "#616060", radius : 10, pbarColor : "#bb1414"}, 
callback : null,
elem : null,

In above code, I have just defined the module named progessBar and it defaults values which will be used if the module is invoked without providing its customized values.

Setting up the customize values

/** this function is setting up the customize values **/
init : function (elem, speed, start, end, style, callback) {
	if(elem == null){
		alert("Progress Bar Cotainer is missing, \nProvide the Progressbar Container.");
	} else {
		
		this.elem = elem || this.elem;
		this.speed = speed || this.speed;
		this.start = start || this.start;
		this.end = end || this.end;
		this.style = style || this.style;
		this.callback = callback || this.callback;
		
		var elem = document.querySelector(this.elem);
		if(elem != null){
			this.stylePbarParent(elem);
			this.createProgressbar(elem);
			this.calcStep();
			this.render();
		}else{
			alert('There is no an element for Progressbar.');
		}
	}
},

The init() is main function which should be invoked to use this module, something like progressBar.init(“#somelement”);.

This function does lots of stuff, like overrides the default values, creates elements, and renders the progress bar. We will understand this whole by knowing following functions

Set various dimensions to parent div

/**
	Set the styles for parent element of progressbar
**/
stylePbarParent : function (elem){
	elem.style.width = this.style.width + "px"; 
	elem.style.backgroundColor = this.style.bgColor; 
	elem.style.height = this.style.height + "px";
	elem.style.borderRadius = this.style.radius + "px"; 
},

The above function stylePbarParent sets the various dimensions like width, height, background, etc to parent div of the progress bar.

Create inner progress bar div

/** 
	this function creates main progressbar element 
*/
createProgressbar : function (parentElem){
	this.pbarElemId = 'progressbar';		
	var elem = document.createElement('div');
	elem.id = this.pbarElemId;
	elem.style.backgroundColor  = this.style.pbarColor;
	elem.style.height  = parentElem.style.height;
	elem.style.borderRadius = (this.style.radius-2) + "px"; 
	parentElem.appendChild(elem);
},

In above function createProgressbar, I have created the element with various attributes, this element will act like progress bar after the animation is started.

Calculate the width for inner div

	
/**remove the numbers after two decimal **/
remmoveDecimal : function (number){
	return (Math.floor(number * 100) / 100);
},

/**
 This calculates the step like, if progressbar width is
 500, the each step would be 5
**/
calcStep : function (){
	var width = (this.style.width / 100);
	this.step  = this.remmoveDecimal(width); // retain only two decimal points
	this.currWidth = this.start == 0  ? this.step :  this.remmoveDecimal((this.step * this.start));
},

With above two functions remmoveDecimal and calcStep, I am getting the width which would be applied to inner div at each iteration of animation.

Render the progress bar

	
/**
	This function renders the actual progressbar by increasing
	it's width, the progressbar will be ended after reached in maximum level 
**/
render : function (){
	var elem = document.querySelector('#' + this.pbarElemId);
	elem.style.width = this.currWidth + "px";
	
	if(this.start >= this.end){
		if(this.callback != null){
			// if callback bassed, it will be invoke on progressbar finished
			this.callback(); 
		}
	}else {
		var fps = 1000 / this.speed;
		var that = this;
		this.renderPbr = setTimeout(
			function (){
			   // Increase performance by
			   // Only perform animation, when browser is able to perform,
			   // It does not execute when browser tab is inactive
			   requestAnimationFrame(function (){that.render();})
			   that.start++;
			   that.currWidth += that.step;
			}, 1000/fps
		);
	} 
}
};

render() is a very important function which does animation, it basically increases the width of inner div at a given time of interval. The animation will be stopped when the start point is meet the end point, in simple words, it's stopped when the progress bar is completed.

If their callback is given when the module is initialized, will be invoked by this.callback(); in the completion of the progress bar.

For invoking the module you could do something like

progressBar.init("#progressbarCont", 50, 0, 100, { width : 500, height : 40, bgColor : "black", radius : 10, pbarColor : "red"}); 

You can find the complete code from HERE.