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
Requires
Random jQuery Plug-ins
Checked checkbox-parent
This tiny plug-in adds and removes a 'checked'-class to input[type=checkbox]'s parents. Very useful if you want to style the entire wrapping <label>-e...
Numeric DL
This tiny plug-in numbers definitions in a definition-list if there are more than one definition for a term. Can be useful for FAQs, actual lists of d...
Slide Presentation
A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will f...
