jquery 实现的一个简单进度条效果实例
jquery实现的一个简单进度条效果实例，进度条完成后进行操作。
效果：
Html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>进度条</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
</head>
<style>
.flex-center {
font-size: 12px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: inline-block;
width: 50%;
height: 20px;
padding-right: 10px;
border: 1px solid #999;
border-radius: 20px;
}
.h-100P {
height: 100%;
}
.bar {
display: inline-block;
background: #59adf9;
color: white;
font-weight: normal;
padding: 0 5px;
font-size: 12px;
text-align: right;
line-height: 20px;
border-radius: 20px;
}
</style>
<body>
<div class="flex-center">
<h3>系统加载中，请稍等...</h3>
<span class="container">
<span id="progressBar" class="h-100P bar"></span>
</span>
</div>
</body>
<script>
$(document).ready(function() {
//定义percentage
var percentage = 0;
//定时器 没0.01秒执行一次
var interval = setInterval(function() {
//判断，如果percentage小于10000时，就是小于100%时
if(percentage < 10000) {
//加上10
percentage=percentage+20;
//percentage除以100，保留1位小数，加上%
var widthTemp = (percentage / 100).toFixed(1) + '%';
//进度条的宽度=percentage
$('#progressBar').css('width', widthTemp);
//显示出百分比的文字
$('#progressBar').text(widthTemp);
//如果到了100%，，执行
} else {
//停止定时器
clearInterval(interval);
//加载完成，显示文字
$('h3').text('加载完成！正在为您跳转...');
//1秒后执行 跳转到百度
setTimeout(function() {
//window.location.href= 'http://www.baidu.com';
}, 1000);
}
}, 10);
});
</script>
</html>
注意：记得引用jquery.js文件
