jQuery加载进度条实例代码
分类：实例代码
进度条效果大家应该不陌生，能够小浏览者以动态直观的方式了解相应的操作的执行进度，非常人性化的效果，下面就分享一段实例代码，以便需要的朋友扩展改造之用，代码实例如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>jQuery模拟页面加载进度条</title>
<style type="text/css">
*{
margin:0;
padding:0;
font-size:12px
}
.loading{
position:relative;
top:0;
left:0
}
.text input{
float:left;
color:#fff;
height:32px;
line-height:34px;
padding:0 15px;
background:#A70000;
border:0
}
.jindu{
float:left;
margin-left:14px;
color:#fff;
width:150px;
height:32px;
line-height:32px;
background:#000;
position:relative
}
.jindu b{
color:#A70000;
font-size:0px;
border-width:10px;
border-color:transparent transparent transparent #A70000;
border-style:dotted dotted dotted solid;
position:absolute;
left:-16px;
top:5px
}
.jindu .jindu2{
width:0px;
height:32px;
line-height:32px;
background:#A70000;
position:absolute
}
.jindu .text{
width:150px;
height:32px;
line-height:32px;
text-align:center;
position:absolute
}
</style>
</head>
<body>
<div class="loading">
<div class="text">
<input type="button" value="正在初始化">
</div>
<div class="jindu"> <b></b>
<div class="jindu2"></div>
<div class="text">页面总进度 <font>0</font>%</div>
</div>
</div>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
var loading=function(a,b){
var c = b*1.5;
if(b==100){
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
$('.loading').animate({top:'-32px'},1000,function(){
alert('页面加载完毕');
});
});
}
else{
$('.loading .jindu2').animate({width:c+'px'},500,function(){
$('.loading input').val(a);
$('.loading font').text(b);
});
}
};
loading('正在加载jQuery UI',30);
loading('正在加载Chrome Frame',50);
loading('正在加载EXTJS',70);
loading('正在加载mootools',90);
loading('正在加载dojo',100);
</script>
</body>
</html>
以上代码实现动态加载进度条效果，代码比较简单这里就不多介绍了。
相关阅读:
（1）.animate()参阅jQuery animate()方法一章节。
（2）.val()参阅jQuery val()方法一章节。
（3）.text()参阅jQuery text()方法一章节。
jQuery加载进度条实例代码，这样的场景在实际项目中还是用的比较多的，关于jQuery加载进度条实例代码就介绍到这了。
jQuery加载进度条实例代码属于前端实例代码，有关更多实例代码大家可以查看。