Learn Web Design Tools: Loading Animation Without Images Using jQuery

Loading Animation Without Images Using jQuery

Keith

This tutorial will teach us to create a loading animation without using any image files. With a little bit of CSS, we're going to show you how to incorporate this jQuery tutorial snippet into your web page to provide you a decent replacement for a graphic loading animation.

DIV Tags – We'll start off by creating a series of <div> tags, which will be used to display the animation. In this example, we want to display 8 boxes as our progress indicators so we'll make 8 of these DIVs but feel free to add or remove any loaderBox DIVS as you prefer.

</div>

CSS Style – You have the option to either place this CSS inside the <head> area of your html or in a separate .css file. Again, you are free to change the names below just as long as you make sure that your wrapper DIV tag id corresponds to that of the jQuerySnipsLoadAnim id. Also, the .loaderBox class specification should correspond to the internal DIVs.

<style>

#jQuerySnipsLoadAnim {

display: block;

width: 200px;

}

.loaderBox {

display: none;

}

</style>

jQuery Setting – This is the part where we'll indicate how we want the boxes to look and behave once the animation is activated. We can change the size and color of the boxes, the background color, the speed of the animation, and whatnot.

var jqsOptions = new Array();

jqsOptions["jQuerySnipsLoadAnim"] = {

'bgcolor' : '#abc',

'position' : 'relative',

'float' : 'left',

'width' : '20px',

'height' : '20px',

'margin' : '2px',

'opacity' : '.5',

'display' : 'none',

'widthOffset' : '+=5px',

'heightOffset' : '+=5px',

'animationSpeed' : '500'

};

var jqsTimer = new Array();

var jqsInt = new Array();

Start/Stop Animation – Basically, any event trigger can be used to start and stop the loading animation but for demonstration purposes, we'll be using the click event to achieve both results. Everything in the loaderStart event is needed to start the loading animation and everything in the loaderStop is needed to stop it. Again, if you're going to change the DIV tags, don't forget to change jQuerySnipsLoadAnim as well.

$("#loaderStart").click(function(){

jqsDiv = "jQuerySnipsLoadAnim";

jqsInit(jqsDiv);

jqsTimer[jqsDiv] = setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);

});

$("#loaderStop").click(function(){

clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);

});

Supporting Functions – Lastly, of course, are the supporting functions. Any part of this need not be changed.

function jqsInit(jqsDiv) {

$(this).stop();

$(this).clearQueue();

clearInterval(jqsTimer[jqsDiv]);

jqsInt[jqsDiv] = 0;

$("#"+jqsDiv+" > div").css({

"display" : "inline",

"background-color" : jqsOptions[jqsDiv].bgcolor,

"position" : jqsOptions[jqsDiv].position,

"float" : jqsOptions[jqsDiv].float,

"width" : jqsOptions[jqsDiv].width,

"height" : jqsOptions[jqsDiv].height,

"margin" : jqsOptions[jqsDiv].margin,

"opacity" : jqsOptions[jqsDiv].opacity

});

}

function jqsLoader(jqsDiv) {

var jqsBox = $("#"+jqsDiv+" > div");

var jqsBoxes = $("#"+jqsDiv+" > div").size();

$(jqsBox[jqsInt[jqsDiv]]).show().animate({

"display": "inline",

"width": jqsOptions[jqsDiv].widthOffset,

"height": jqsOptions[jqsDiv].heightOffset,

"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed, complete: function() {

$(this).animate({

"width": jqsOptions[jqsDiv].width,

"height": jqsOptions[jqsDiv].height,

"opacity": jqsOptions[jqsDiv].opacity}, {queue: false, duration: jqsOptions[jqsDiv].animationSpeed});

}

});

jqsInt[jqsDiv]++;

if (jqsInt[jqsDiv] == jqsBoxes) { jqsInt[jqsDiv] = 0; }

}

Here is the Full Code.

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>