通过ajax获取进度条数值，同步css进度条样式，100%之后进度条跳转页面

通过ajax获取进度条数值，同步css进度条样式，100%之后进度条跳转页面
html

  <input class="cbi-button cbi-button-apply" type="button" value="<%:Upgrade%>" onclick="swapCheck(lb)"/>
         <div class="wrapper" id="lb"  style="display: none;text-align: center;margin: auto;width:360px">
            <div class="load-bar" >   
                <div class="load-bar-inner" data-loading="0" id="loadbar" max="100"> </div> 
            </div>  
           <div class="hah"><span id="counter"></span>  
            <p id="text"></p></div>
        </div> 

javascript

<script>
	    	function swapCheck(lb){
	             var interval = setInterval(increment,100);
	             var traget=document.getElementById('lb');  
	             var text = document.querySelector('#text');
	  function increment(){
	    XHR.get('<%=luci.dispatcher.build_url("admin/system/upgrade/download_progress")%>', null, function(x, data) {
	        
	    if (data) {
	        var percentage = data.percentage;
	        $('#counter').html(percentage+'%');
	       	$(".load-bar-inner").css("width",percentage+"%");
	    }
	    if(percentage==100){
	        document.getElementById("text").innerHTML = "<%:Processing, please hold%>";
	    }else{
	        document.getElementById("text").innerHTML = "<%:loading in%>";
	 }
	  })
	  }
	        if(traget.style.display=="none"){  
	            traget.style.display="";  
	        }else{  
	            traget.style.display="none";  
	        }
		var url=" <%=luci.dispatcher.build_url('admin', 'system','upgrade', 'onlineupgrade')%>"
			window.location.replace(url);
		}        ;
</script>

css

.wrapper p a {color:#757575; text-decoration:none;}
.wrapper .load-bar { width: 100%; height: 20px; border-radius: 30px; background-color: #D9D9D9; position: relative; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),  inset 0 2px 3px rgba(0, 0, 0, 0.2); }
.wrapper .load-bar:hover .load-bar-inner, .wrapper .load-bar:hover #counter {
        animation-play-state: paused;
        -moz-animation-play-state: paused;
        -o-animation-play-state: paused;
        -webkit-animation-play-state: paused;
}
.wrapper .load-bar-inner { height: 99%; width: 0%; border-radius: inherit; position: relative; background-color:#0099CC; animation: loader 10s linear infinite; -moz-animation: loader 10s linear infinite; -webkit-animation: loader 10s linear infinite; -o-animation: loader 10s linear infinite; }
.wrapper #counter {
        padding: 5px 10px;
        border-radius: 0.4em；
        font-size: 20px;
        font-weight: bold;
        width: 44px;
}

.wrapper h1 {
        font-size: 28px;
        padding: 20px 0 8px 0;
}
.wrapper p {
        font-size: 13px;
}

.load-bar-inner {
        height: 99%;
        width: 0%;
        border-radius: inherit;
        position: relative;
        background: #c2d7ac;
        animation: loader 10s linear infinite;
}

记一下这个
animation: loader 10s linear infinite;
animation设置的参数：

设置对象所应用的动画名称：loader

设置对象动画的持续时间：10s

设置对象动画的过渡类型：linear （线性过渡，等同于贝塞尔曲线）

设置对象动画的循环次数：infinite （无限循环）

然后还有些踩坑的