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

 

转载于:https://www.cnblogs.com/suzhiyong1988/p/4956640.html