Ajax Loader 1.0
Created Thursday 25th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
What it Does
Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' on top of the selected element(s). The div is of course completely stylable.
How to Use
jQuery('#contact').ajaxLoader(); would add the overlay on top of the #contact-element.
When you want to remove the loader simply run jQuery('#contact').ajaxLoaderRemove();
Example
Example Code
HTML
<div id="jquery-ajax-loader-example">
I should start loading after a couple of seconds, then load for a couple more and then stop loading only to start again after a couple of seconds. And so on.
</div>
JS
setInterval(function () {
jQuery('#jquery-ajax-loader-example').ajaxLoader();
setTimeout(function () {
jQuery('#jquery-ajax-loader-example').ajaxLoaderRemove();
}, 2000);
}, 4000);
Source Code
jQuery.fn.ajaxLoader = function (conf) {
var config = jQuery.extend({
className: 'jquery-ajax-loader',
fadeDuration: 500
}, conf);
return this.each(function () {
var t = jQuery(this);
if (!this.ajaxLoaderObject) {
var offset = t.offset();
var dim = {
left: offset.left,
top: offset.top,
width: t.outerWidth(),
height: t.outerHeight()
};
this.ajaxLoaderObject = jQuery('<div class="' + config.className + '"></div>').css({
position: 'absolute',
left: dim.left + 'px',
top: dim.top + 'px',
width: dim.width + 'px',
height: dim.height + 'px'
}).appendTo(document.body).hide();
}
this.ajaxLoaderObject.fadeIn(config.fadeDuration);
});
};
jQuery.fn.ajaxLoaderRemove = function () {
return this.each(function () {
if (this.ajaxLoaderObject) {
this.ajaxLoaderObject.fadeOut(500);
}
});
};
Download
Plug-in
- jquery.ajaxLoader.js (1.95 kb Unpacked) (Minified)
- jquery.ajaxLoader.css (0.11 kb Unpacked)
- jquery.ajaxLoader.gif
