28-11-2010

jQuery quick ajaxloader animation

This requires jquery, the open overlay plugin and an ajax loader image and some css

ajaxAnim=function(close){
	if (close){
		setTimeout($.fn.openOverlay.closeOverlay,1000);
		//$.fn.openOverlay.closeOverlay();
		return;
	}
 
	if($('#loaderImage').length){
	 	ajaxAnim(1);
		ajaxAnim(0);
	}
 
	$('body').append('<div id="loaderImage"></div>');
	$('#loaderImage').openOverlay();
}
ajaxAnim();	//opens ajax loader animation
ajaxAnim(1); 	//closes ajax loader animation
 

example css:

#loaderImage{
	width:50px; height:50px; background-color:white; 
	background-image:url(../img/ajax-loader.gif);
	background-position:center center; 
	background-repeat:no-repeat;
	-moz-box-shadow: 2px 3px 4px #666; 
	-webkit-box-shadow: 2px 3px 4px #666; 		
	box-shadow: 2px 3px 4px #666; 
	border:1px solid #333}
 

Comments:

Your comment:

»

 

[x]