一.引言

一直都有注意到很多网站顶部会显示一个一条线的加载进度条，还蛮有新意的，

今天抽空研究了下，简单实现了下.给自己的小站也装备上这个酷炫的利器 - -！

二.实现

其实道理倒是挺简单的，使用css+js，动态改变样式即可.

2.1原理

通过css给页面顶部增加一个固定的线条，在页面加载的过程中改变这个线条的样式即可实现。

当页面加载完成后，隐藏进度条。

再酷炫一点就是给进度条最后加个闪烁的小点~

另外就是进度条的值的改变方案，搜索网上的实现方案的时候发现了几种类型，

a.固定定时器匀速增加进度，几秒后隐藏

b.再页面不同位置上手动设置进度。

c.再或者就是pace.js这种，全模拟页面的实时进度。

前面2中方案都试了下，感觉不怎么好，要么不真实，要么需要改动太多页面，

2.2实现

后来google出来一种我觉得不错的方案：变速增加进度，开始很快的增加进度，

后面越来越慢，即使到了99也会等待页面加载，同时监听页面加载完成事件，在页面真正加载完成后隐藏进度条。

其实就是方案a的改进版而已。据说pace.js里面也是这种方案，但是pace里面还有些其他的东西，我觉得用不上.，就懒得用了.

还是自己实现的好哈~

Ktop.method("start",function(per) {
		var me=this;
		me.showpro();
		me.proval=0;
		me.animationInterval=20;
			
		me.inter=setInterval(() => {
				me.updatepro(me.proval,me);
				
		/*
		 * if(me.proval==100) clearInterval(inter); me.proval+=5;
		 */
				
			}, me.animationInterval);
		
	});
	
	
	   var pageStatus = null;
	  window.document.addEventListener("readystatechange", function(){
	        if(document.readyState == "complete"){
	            pageStatus = "complete";
	        }
	    }, false);
	  
	
	  /**
		 * 更新进度/监听完成事件。等待完完成，加载间隔快-》慢
		 */
	Ktop.method("updatepro",function(progress,bean) {
		var me = bean;
		if(pageStatus == "complete"){
            me.pro(100);
        }
		else
			{
		if(typeof(me.inter)!="undefined")
			{
			clearInterval(me.inter);
			me.inter=null;
			}
		
			progress+=5;
			me.pro(progress);
			  if(progress >= 0 && progress <= 30){
				  me.animationInterval += 1;
				
	            }
	            else if(progress > 30 && progress <= 60){
	            	me.animationInterval += 2;
	            	
	            }
	            else if(progress > 60 && progress <= 80){
	            	me. animationInterval += 3;
	            	
	            }
	            else if(progress > 80 && progress <= 90){
	            	me.animationInterval += 4;
	             
	            }
	            else if(progress > 90 && progress <= 95){
	            	me. animationInterval += 80;
	             
	            }
	            else if(progress > 95 && progress <= 99){
	            	me.animationInterval += 150;
	              
	            }
	            else if(progress >= 100){
	            	me.pro(99);
	            }
	            setTimeout(function(){me.updatepro(me.proval,me)}, me.animationInterval); 
			}    
			
			
	});
	
	
	Ktop.method("pro",function(per) {
		var me = this;
	
			
			// var per = Math.round(evt.loaded / evt.total * 100);
		
			$("body").find(".kprodiv .hrpro").css("width",
					per + "%");

			if (per == 100)
				me.hidepro();

		
	});

2.3样式

样式很容易调整，就是最后那个小原点费了不少事.用关键帧，调整阴影大小及透明度，缩放，完成闪烁


.kprodiv span {
                display: block;
                width: 4px;
                height: 4px;
                float:left;
                position: relative;
                top: -1px;
                left: -1px;
     
               background:#44bb8eaa;
             
                border-radius: 50%;
                  -webkit-border-radius:50%;
              border: 1px solid #44bb8e;
box-shadow:0 0 10px 2px #34bd83;
 
 -moz-transition: all 0.5s ease-in-out;
  -o-transition: all  0.5s ease-in-out;
  -webkit-transition: all  0.5s ease-in-out;
  -ms-transition: all  0.5s ease-in-out;
  transition: all  0.5s ease-in-out;
            }
            
@-webkit-keyframes blink{
  
    0% {
        transform: scale(1);
        opacity: .25
    }
    50% {
        transform: scale (1, 5);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: .25;
    }

}

.blink {
    animation:blink 1000ms infinite;
    -webkit-animation:blink 1000ms infinite;
     -moz-animation:blink 1000ms infinite;
}