Web Design Sydney

The title is fairly generic, so if you have found this, congratulations, your life is about to become far simpler. When working on or with ajax enabled web sites we usually run into the issue of request times, users need to be shown that something is happening in the background and visually we accomplish this with an Ajax Loader. You would have seen plenty of these by now, little animated gifs that give you a sense the web-page is loading something.

Now the drama here is they are a PITA to create all the time on the fly while your writing those fancy ajax queries, some of the framework simplify the task by letting you specify a loading attribute, but the behaviour isn’t standard and I find the implementation is lacking because it is usually an after thought of the original Ajax request in the framework. Also you don’t want to create useless mark-up in you page by having a permanent but hidden until needed ajax overlay like I see a lot of sites doing. Less code = better at everything, remember that.

So here is the solution, create on the fly ajax loaders when and where-ever you may need them!

Demo

View Demo :: jQuery

The HTML

 See example page

Note: Elements you intend to insert the ajax loader into must be “position:relative;”

The CSS

 .ajax_overlay {}
 .ajax_loader {background: url("spinner_squares_circle.gif") no-repeat center center transparent;width:100%;height:100%;}

Note: ‘.ajax_overlay ‘ styles are mostly done by the script so you can dynamically change and control them

The jQuery

function ajaxLoader (el, options) {

	var defaults = {
		bgColor 		: '#fff',
		duration		: 800,
		opacity			: 0.7,
		classOveride 	: false
	}
	this.options 	= jQuery.extend(defaults, options);
	this.container 	= $(el);
	
	this.init = function() {
		var container = this.container;

		this.remove(); 

		var overlay = $('
').css({
				'background-color': this.options.bgColor,
				'opacity':this.options.opacity,
				'width':container.width(),
				'height':container.height(),
				'position':'absolute',
				'top':'0px',
				'left':'0px',
				'z-index':99999
		}).addClass('ajax_overlay');

		if (this.options.classOveride) {
			overlay.addClass(this.options.classOveride);
		}

		container.append(
			overlay.append(
				$('
').addClass('ajax_loader')
			).fadeIn(this.options.duration)
		);
    };
	
	this.remove = function(){
		var overlay = this.container.children(".ajax_overlay");
		if (overlay.length) {
			overlay.fadeOut(this.options.classOveride, function() {
				overlay.remove();
			});
		}	
	}

    this.init();
}	

Note: paste this code into your scripts file.

Usage examples

$(document).ready(function() {
	$(".box-1").live('click', function(){	
		new ajaxLoader(this, options);
	});
});

Note: For more detailed examples, please see the Ajax Loader demo page

Default options

var options = {
	bgColor 		: '#fff',
	duration		: 800,
	opacity		: 0.7,
	classOveride 	: false
}

Set up options, explained below

• bgColor: string – colour of the background overlay
• duration: number – length of fadeIn and fadeOut effects
• opacity: number – opacity of the background overlay
• classOveride: string – a class name to over-ride your default loader style

Download

Contains ‘Ajax Loader & Spinner’ example and code

jQuery Ajax Loader & Spinner