Ajax Loader 1.0
Created Thursday 25th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)
Please have a look at the "Other Resources" for bug reports or further help on jQuery. Do not post bug reports or feature requests as comments to unrelated articles. If bug reporting on bugtracker.a-framework.org fails, e-mail me.
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
