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 id="jQuerySnipsLoadAnim">
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
</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>
<body><style>
#jQuerySnipsLoadAnim {
display: block;
width: 200px;
}
.loaderBox {
display: none;
}
</style>
<button id="loaderStart">Start Loading
Animation</button> <button
id="loaderStop">Stop Loading Animation</button>
<div id="jQuerySnipsLoadAnim">
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
<div
class="loaderBox"></div>
</div>
<script>
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();
$("#loaderStart").click(function(){
jqsDiv =
"jQuerySnipsLoadAnim";
jqsInit(jqsDiv);
jqsTimer[jqsDiv]
=
setInterval("jqsLoader('"+jqsDiv+"')",jqsOptions[jqsDiv].animationSpeed);
});
$("#loaderStop").click(function(){
clearInterval(jqsTimer["jQuerySnipsLoadAnim"]);
});
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; }
}
</script>
</body>
</html>
|
Click
here to view the demo.
