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

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.

Example Code

HTML

<div id="jquery-ajax-loader-example">
I should start loading after a couple of secondsthen 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 
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

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...

    Details

  • 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...

    Details

  • 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...

    Details

More Plug-ins

Recent Comments

  1. AL on "Accessible, Stylish Modal Windows With Modern CSS"

    @Matt - What exactly isn't working? "Not working" ...

  2. roboteich on "Accessible, Stylish Modal Windows With Modern CSS"

    This is hardly accessible. Screen reader focus is...

  3. Matt on "Accessible, Stylish Modal Windows With Modern CSS"

    I have tried to implement this, but for some reaso...

Page cached. Loaded in: 0.0073 second(s).
Last DB change: 2010-09-03 17:14:49
Last file change: 2010-08-12 15:31:16
Cache created: 2010-09-03 20:12:11