In this post I'd like to show you how to create a loading bar with JavaScript but without jQuery. It could seem a little bit difficult at a first glance but don't worry, because everything is really easy to grasp. First of all, a loading bar is made up of a background element and a foreground element plus an additional element showing the progress of our action. The foreground element is the element that's going to change its width while the action is in progress and the additional element will show a message indicating the status of our action, for example by saying "10% completed" and so on. First, let's draw our HTML and CSS:
<div id="container">
<div id="test"></div>
</div>
<div id="message"></div>
The CSS code is as follows:
#container {
width: 500px;
height: 50px;
background: silver;
overflow: hidden;
}
#test {
width: 0px;
height: 50px;
background: orange;
}
We've set the width of the innermost element to 0, so every time our animation will advance its width will change by a certain amount of pixels until it reaches the overall width of 500 pixels, that is, the width of its parent element.
Now, JavaScript. First, we declare a basic object with some default private members:
window.onload = function() {
var Animator = new function() {
var parent = document.getElementById('container');
var element = document.getElementById('test');
var target = document.getElementById('message');
// more code here
};
};
The Animator object works as a singleton, so you don't have to manually instantiate it with the new operator. So far we've only set up our hooks into the page. Now it's time to make everything work with a method called move():
this.move = function() {
var i = 0;
var width = 0;
var timer = window.setTimeout(function() {
i += 1;
element.style.width = width + i + 'px';
window.setTimeout(arguments.callee, 250);
if(i == 50 ) {
target.innerHTML = '10% completed';
}
if(i == 100 ) {
target.innerHTML = '20% completed';
}
if(i == 150 ) {
target.innerHTML = '30% completed';
}
if(i == 200 ) {
target.innerHTML = '40% completed';
}
if(i == 250 ) {
target.innerHTML = '50% completed';
}
if(i == 300 ) {
target.innerHTML = '60% completed';
}
if(i == 350 ) {
target.innerHTML = '70% completed';
}
if(i == 400 ) {
target.innerHTML = '80% completed';
}
if(i == 450) {
target.innerHTML = '90% completed';
}
if(i == 500) {
target.innerHTML = '100% completed';
window.clearTimeout(timer);
}
}, 250);
};
We've created a timer by self-referencing the setTimeout() function used within our method. Each time this method runs, it increments an internal counter by 1 so that the width of our bar will augment by 1 pixel at time. When the counter reaches a certain step (e.g. 50, 100 and so on), we display a message indicating the overall percentage of the animation that has been completed so far. Finally, when the counter reaches 500, even the timer is reset. You can see the final result in the page below.