<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="Keywords" content="{$desc.keywords}">
<meta name="description" content="{$desc.describes}" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>定时器的进度条</title>
<script type="text/javascript" src="__PUBLIC__/js/jquery-1.9.1.min.js"></script>
<style>
*{padding: 0;margin: 0;}
.loading{width:100%;height:100%;position:fixed;top:0;left:0;z-index: 100;background: #fff;}
.loading .pic{width:100px;height:100px;position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border:1px solid red;font-size:30px;text-align: center;line-height: 100px;}
.loading .pic span{display: block;width:80px;height:80px;position: absolute;top: 10px;left: 10px;border-radius: 50%;box-shadow: 0 3px 0 #666;-webkit-animation:rotate 1s infinite linear;animation:rotate 2s infinite linear;}
@-webkit-keyframes rotate{
0% { -webkit-transform:rotate(0deg);}
100% { -webkit-transform:rotate(360deg);}
}
@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<script>
$(function(){
var img = $("img");
var num=0;
//alert(img.size());
img.each(function(i){
var oImg=new Image();
oImg.onload=function(){
oImg.onload=null;
num++;
//alert(num)
//alert(parseInt(num/img.size()*100)+"%");
$(".loading b").html(parseInt(num/img.size()*100)+"%");
if(num >= i){
$(".loading").fadeOut();
}
}
oImg.src=img[i].src;
})
})
</script>
<div class="loading">
<div class="pic">
<span ></span>
<b>0%</b>
</div>
</div>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345590.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345899.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1489659228856.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1489659177270.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1489658917054.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520781089459.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1493713920729.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1498112454135.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1498112414569.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1498112398573.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1498112396998.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1498112393281.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
<img src="http://app.jstyle.cn/jm_interface_1_2/upimage/1520832345713.jpg"/>
</body>
</html>