进度条，加载到百分比，出现不同的文字提示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单的jquery进度条</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<script>
var i=0;
/*add——创建tbx下的div加文字和变宽度的方法*/
function add(i){
var tbox =$(".tbox");
var tiao =$(".tiao");
tiao.css("width",i+"%").html(i+"%");
}
/*创建方法（i++循环起来）*/
function xh(){
if(i>100){
$(".ok").html("正在跳转").fadeIn("slow");
return;
}
else if(i>0 && i<10){
$(".ok").html("正在验证登录权限").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>10 && i<20){
$(".ok").html("正在验证菜单权限").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>20&&i<30){
$(".ok").html("正在验证按钮权限").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>30&&i<40){
$(".ok").html("正在加载基础框架").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>40&&i<50){
$(".ok").html("正在加载基础控件").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>50&&i<60){
$(".ok").html("正在同步用户数据").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>60&&i<70){
$(".ok").html("正在同步项目数据").fadeIn("slow");
setTimeout("xh()",200)
add(i);
i++;
}
else if(i>70&&i<90){
$(".ok").html("正在同步配件数据").fadeIn("slow");
setTimeout("xh()",300)
add(i);
i++;
}
else if(i<=100){
setTimeout("xh()",300)
add(i);
i++;
}
}
/*调用xh()函数*/
$(document).ready(function(){
xh();
});
</script>
<style>
.clearfix:after {
content: " ";
display: block;
clear: both;
height: 0;
}
.clearfix {
zoom: 1;
}
.box{width:100%; height:100%; margin:0 auto; }
.ok{width:200px; height:100px; margin:0 auto; text-align:center; line-height:100px; color:#666; display:none; }
.tbox{width:397px; height:30px; background:rgba(236, 236, 236, 0.867); margin:0 auto;margin-top:24%;}
.tbox div{width:0px; height:30px; background:#e8e8e8; text-align:center;
font-family:Tahoma; font-size:18px; line-height:30px;color:#666;}
</style>
<div class="box">
<div class="tbox">
<div class="tiao"></div>
</div>
<div class="ok"></div>
</div>
</body>
</html>
