純js+css實現loading等待效果

---

　　此插件是基於jqueryUI的widget,下面是具體實現代碼

第一部分css:

/***loading***/
.loading-box{ position:absolute; text-align:center;}
.loading-box .loading-message{ height:30px; line-height:30px; color:#999999;}
.sideslip{background-color:#f9f9f9; font-size:12px; color:#666666;position:relative;}
.scroll-box{ margin:1px auto 0px auto; }

第二部分jquery:

(function($,undefined){
    $.widget('ui.loading', {
        options: {
            loadingStyle: { backgroundColor: '#F3F3F3' },
            message: '任務加載中'
        },
        _create: function () {
            this.html = '<div class="loading"><div class="loading-box"><div class="loading-img"><img src="/Images/282.GIF" width="32" height="32"  alt=""/></div><div class="loading-message"></div></div></div>';

        },
        show: function () {
            var wrapW = this.element.innerWidth(),
                wrapH = this.element.innerHeight();
            this.loadingHtml = $(this.html).appendTo(this.element).css(this.options.loadingStyle).css({ width: wrapW, height: wrapH, position: 'absolute', top: 0, left: 0 });
            this.loadingHtml.find('.loading-box').position({ my: 'center center', at: 'center center-10%', of: this.loadingHtml });
            this.loadingHtml.find('.loading-message').text(this.options.message);

        },
        hide: function () {
            if (this.loadingHtml != undefined) {
                this.loadingHtml.remove();
            }
        }
    });
})(jQuery)

第三部分調用：

　　這里需要說明下，首先需要初始化loading，如下面例子：

//初始化loading
    $('.sideslip').loading();

　　最后通過window.setTimeOut()來設置延時時間，下面的例子是延遲兩秒后隱藏loading

$('.sideslip').loading('show');
     window.setTimeout(function () {
          $('.sideslip').loading('hide');
      }, 2000);