Module Loading

module-loading-html.html

<a href="javascript:void(0)">Trigger</a>

module-loading-js.js

var webdesign = webdesign || {};

webdesign.Helpers = {
    loading : function (callback) {
        
        var $loading = $('.helper-loading');
        if ($loading.length) {
            $loading.delay(800).fadeOut(function () {
                var $_self = $(this);
                $_self.remove();
                if (callback && typeof(callback) === "function") {
                    callback();
                }
            });
        } else {
            $('<div class="helper-loading"></div>').appendTo('body');
        }
    }
};

$('a').click(function(){
    webdesign.Helpers.loading( webdesign.Helpers.loading());
});

module-loading-styles.css

.helper-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #222;
    opacity: .8;
    z-index: 9999;
}