AndreasLagerkvist.com

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);
        }
    });
};