How to create your own animated loading graphics using javascript, jquery, and html5

Creating animations with javascript is very easy — this won’t take long.

There are only a few basic concepts that you need to understand to create your own algorith-based animations in seconds.

In this article, we will cover all of the steps to go from a blank page to proudly displaying the loader on a page while a page is still loading.

Demo:

http://dev.datafault.net/orbs.php

Step 1.  Download orbitalFault.js [~3 kb]

In order for this particular tutorial to actually work, you have to include this small 3kb  javascript library that contains very a basic animation framework.

http://dev.datafault.net/scripts/orbitalfault.js

Step 2. Describe the functionality of relevant objects

Creating the loader was simple — I prototyped Orb to have this kind of functionality:

When you create a new Orb, you need to specify at least 3 x-values and 3 y-values, each as a separate array of numbers.  It is possible to specify any number, however less than 3 tends to cause division by zero NaN results.

You must also specify a size (20 is usually good but can be any number)

Next, you must specify how long you want each subsequent x-value/y-value pair to take in order to animate to the next x-value/y-value pair.  For this example I chose 5 seconds, which is 5000 ms.

Lets say for now that we want just one Orb, and we want it to move from the top left of the screen to the bottom right of the screen in around 5 seconds. The way that you would implement this would be something like this for a website that is 800×600 in size:

 var x-values = [ 0, 400, 800];
 var y-values = [0, 300, 600];
 var orbSize = 20;
 var loopAnim = 1;
 var orbId = 1;
 var stepInterval = 5000;
 var myOrb = new Orb(x-values, y-values, orbSize, stepInterval, orbId, loopAnim);

We’re almost done.  The last thing needed is an animation loop which calls the function

var animationFps = 50;
var myLoop = setInterval(function() {  move_myOrb_To_Next_Frame() }, animationFps);

function move_myOrb_To_Next_Frame() {
    myOrb.oneStep(animationFps);
    drawFrame();
}

So, now we have everything except the HTML elements that we’re going to draw myOrb on.

The way that we create those elements is by first creating a container div,

Inside of that div a canvas with the id ‘myCanvas’ or ‘myLoader’ or whatever you want the ID to be.

You would make the container div large enough for the entire animation to show from start to finish without changing the div.

For our tutorial, I’m going to put this into thepart of a web page:

 <div width="800px" height="600px" id="myLoader"> 
    <canvas id="myCanvas" width="800px" height="600px">
    </canvas>
</div>

And finally, we create the drawFrame() function to draw the frame:

     var canvasObj = document.getElementById( 'myCanvas' );
     var context = canvasObj.getContext( '2d' );  //store myCanvas in memory

function drawFrame() {
   
     contextObj.fillStyle = 'rgba(12,58,125,0.45)'; // blue color
     contextObj.clearRect( 0, 0, 800, 600 );
     contextObj.beginPath();
     var xpos = myOrb.xPos(animationFps);   // calculates the X-value from properties
     var ypos = myOrb.yPos(animationFps);   // calculates the Y-value
     contextObj.arc( xpos, ypos, myOrb.size, 0, Math.PI * 2, true );
     contextObj.fill();
}

Voila. Assuming that you put the Javascript in a<script>
tag, opening this page will create a single Orb that flies across the screen in around 10 seconds and then resets.

The rest is simple:  create a circle using the contextObj.save() and contextObj.restore() functions:

for (var rotation = 0; rotation < 360.0; rotation++) {
    rotation += 30;
    contextObj.save();
    contextObj.rotate(rotation);
    drawFrame();
    contextObj.restore();
}

Simply add this code into the function move_myOrb_To_Next_Frame() like this:

function move_myOrb_To_Next_Frame() {
    for (var rotation = 0; rotation < 360.0; rotation++) {
       rotation += 30;
       contextObj.save();
       contextObj.rotate(rotation);
       drawFrame();
       contextObj.restore();
    }
}

And now you have something similar to a loader.  You can see a working example of this by visiting

http://dev.datafault.net/orbs.php

Which contains the following code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="/scripts/orbitalfault.js"></script>

</head>

<body>
<div id="orb-container" style="width: 500px; height: 500px; top: -40px; left: -20px;"></div>
<script type="text/javascript">
var rotation = 60.00;

var refreshRate = 60;
var canvasObj = document.createElement( 'canvas' );
		canvasObj.width = 300 ;
		canvasObj.height = 300 ;
		canvasObj.id = 'orb-canvas';
		canvasObj.style.zIndex = 4;
		var container = document.getElementById("orb-container");
	        container.appendChild( canvasObj );
		var contextObj = canvasObj.getContext( '2d' );
		contextObj.fillStyle = 'rgba(12,58,125,0.15)';
		var rdx = -0.75;		
		contextObj.scale(0.45, 0.45);
		function animTimeout() {
			 contextObj.clearRect( 0, 0, 500, 500 );
			  rotation = parseFloat(rotation) + parseFloat(rdx);				if (rdx < 0) {
			   if (rotation < 30.0) { rdx = 0.75; }
			} else {
          		   if (rotation > 390.0) { rdx = -0.75; }	
							}
							 
	for (var i=0; i<8; i++) {
	   var fillAmt = parseFloat(0.75 * (410 - parseInt(rotation)) / 450);
	   contextObj.fillStyle = 'rgba(12,58,125,' + fillAmt + ')';
	   contextObj.save();
				
	   var tOrb = orbs[i];
	   tOrb.oneStep(refreshRate);
	   contextObj.beginPath();
	contextObj.arc( tOrb.xPos(refreshRate) , tOrb.yPos(refreshRate), tOrb.size, 0, Math.PI * 2, true );
	  contextObj.fill();
	  contextObj.restore();
	}
		
			
}
var mainLoop = setInterval(function() { animTimeout(); }, refreshRate);

var xv; var yv; var orbs = [];
xv = [1,215,258,etc.];
yv = [1,121,425,etc.];

for (var i=0; i<8; i++) {
	var tOrb = orbs[i];
	tOrb._xIdx = parseInt(parseInt(i) + (0.5 * parseInt(i))) * 3;
	tOrb._yIdx = parseInt(parseInt(i) + parseInt(i)) * 2;
	tOrb.size = 15 + parseInt(i);
}

And thats it for the loader. See? not so difficult to grasp. Now anytime you want to display the loader just call something like this:

$("myLoader").show();

If you have any questions, send me an e-mail and i will try to explain better.

– mike