A simple jquery "loading" overlay

jqloader.debug.js

(function ($) {
    $.fn.ajaxloader = function () {
        var ajaxloader = $('<div class="Ajax-Loader"><div class="Ajax-Loader-Overlay"></div><div class="Ajax-Loader-Image ui-corner-all"><img src="DesktopModules/DondeCompro/UI/recursos/img/loadinfo.net.gif"/></div></div>');
        this.after(ajaxloader);
        ajaxloader.css('top', this.position().top).width(this.outerWidth()).height(this.outerHeight());
        ajaxloader.find('.Ajax-Loader-Overlay').css('opacity', 0.5).width(this.outerWidth()).height(this.outerHeight());
        ajaxloader.find('.Ajax-Loader-Image').css('top', -((ajaxloader.height() / 2) + 36));
        ajaxloader.hide();
        return ajaxloader;
    };
})(jQuery);

jquloader.debug.css

.Ajax-Loader {
    position: absolute;
    z-index: 9999;
    
}
.Ajax-Loader .Ajax-Loader-Overlay {
    background-color: black;
    
}
.Ajax-Loader .Ajax-Loader-Image {
    background-color: black;
    width: 72px;
    height: 72px;
    margin: 0 auto;
    position: relative;
}

.Ajax-Loader .Ajax-Loader-Image img {
    display: block;
    padding: 12px;
}

dfdfdf