插件-监控页面加载之loading

查看效果点https://icedjuice.github.io/plug-in/loading/loading.html

简单易用的loading插件，该插件并不是真正的监控页面的资源加载过程，而是通过模仿监控加载实现效果，简单易用且基本不消耗性能，十分方便。

1. html

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/Loading.jq.js" type="text/javascript" charset="utf-8"></script>

2.css

#loadingPage{
            width: 500px;
            margin: 100px auto;
        }
        .loadingWrap{
            width: 500px;
            height: 10px;
            border: 2px solid #000;
            border-radius: 10px;
            position: relative;
        }
        .loadingBarbox{
            width: 98%;
            height: 8px;
            position: absolute;
            left: 1%;top: 1px;
            border-radius:8px;
            overflow: hidden;
            
        }
        #loadingBar{
            display: block;
            height: 100%;
            position: absolute;
            left: 0;top:0;
            background-color: #000;
        }
        #loadingNum{
            position: absolute;
            left: 0;top: 120%;
            display: block;
            font-size: 20px;
            color: #000;
            width: 100%;
            text-align: center;
        }

3.js

function Loading (callBack){
    
    var self = this;
    this.Dom = '<div id="loadingPage"><div class="loadingWrap"><div class="loadingBarbox"><div id="loadingBar"></div></div><span id="loadingNum"></span></div></div>'
    $('body').append(self.Dom);
    this.interval = null;
    this.page =  $('#loadingPage');
    this.bar =  $('#loadingBar');
    this.numbox = $('#loadingNum');
    this.callBack = callBack || function(){return false;};
    this.progress = 0;
   
    this.run = function(timing,num,way){
       clearInterval(self.interval);
       self.interval = setInterval(function(){
           self.progress += num;
           if(self.progress>=100) self.progress = 100;
           self.bar.css('width' , self.progress + "%" );
           self.numbox.text( self.progress + '%' );
           if(self.progress == 90 && !way){self.run(500,1,false);}
           if(self.progress == 99 && !way){clearInterval(self.interval);}
           if(self.progress == 100){
               clearInterval(self.interval);
               if(!!self.callBack){self.callBack();}
               setTimeout(function (){
                    self.page.animate({'opacity':'0'},400,function (){$(this).remove();});
               },400)
           }
       },timing); 
    }
    this.init = function (timing,num,way){this.run(timing,num,way);};
    
    $(window).on('load',function(){self.run(13,5,true)});
}

4.使用方法

<script type="text/javascript">


    $(document).ready(function (){ 

        new Loading(function(){

　　　　　　  console.log('loaded')

　　　　 }).init(50,1,false);    
    })

</script>

5.效果

    想要什么效果只需要修改相应的css就可以实现不同的加载效果啦！

（完）