<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>数据分析进度条-jq22.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.flex-center {
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:5px;
}
.h-100P {
height:100%;
}
.bar {
display:inline-block;
background:#90bf46;
color:white;
font-weight:bold;
padding:0 5px;
text-align:right;
border-radius:5px;
border-right:1px solid #999;
}
#myProgress {
margin-top20px;
width: 100%;
height: 30px;
position: relative;
background-color: #ddd;
}
#myBar {
background-color: #4CAF50;
width: 10px;
height: 30px;
position: absolute;
}
</style>
</head>
<body>
<div class="flex-center">
<h1>正在为你分析膳食营养,请稍后...</h1>
<span class="container">
<span id="progressBar" class="h-100P bar"></span>
</span>
</div>
<div id="myProgress">
<div id="myBar"></div>
</div>
<br>
<button onclick="move()">点我</button>
<script>
$(document).ready(function() {
var percentage = 0;
var interval = setInterval(function() {
if (percentage < 10000) {
percentage = percentage + 35;
var widthTemp = (percentage / 100).toFixed(0) + '%';
$('#progressBar').css('width', widthTemp);
$('#progressBar').text(widthTemp);
} else {
clearInterval(interval);
$('h1').text('膳食分析完毕!正在为您跳转...');
setTimeout(function() {
//location = '#';
}, 1500);
}
}, 5);
});
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 10);
function frame() {
if (width == 100) {
clearInterval(id);
} else {
width++;
elem.style.width = width + '%';
}
}
}
</script>
</body>
</html>