<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>进度条</title>
<style type="text/css">
.process_bar,.success_process{display:none;position:absolute;z-index:201;background:#ffffff;width:360px;height:100px;left:50%;margin-left:-180px;top:40%;box-shadow:0 0 5px #555555;padding:20px 44px;text-align:center;}
.process_bar p{margin-bottom:20px;}
.oranges_bar{width:0;background:orange;height:4px;border-radius:1px;}
.success_process{height:60px;}
.success_process img{width:20px;height:20px;margin-right:10px;}
</style>
</head>
<body>
<button class="c">点我</button>
<div class="process_bar">
<p>信息同步中 <i id="number">1</i>%</p>
<div class="oranges_bar">
</div>
</div>
<div class="success_process">
<img src="images/duihao.png" />商品同步成功
</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(".c").click(function() {
$(".process_bar").show();
var i = 1;
var ices = setInterval(function() {
if (i == 99) {
clearInterval(ices);
$(".process_bar").hide();
$(".success_process").fadeIn();
setTimeout(function() {
$(".success_process").fadeOut(200);
}, 3000);
}
i++;
$("#number").html(i);
$(".oranges_bar").css("width", i + "%")
}, 100);
});
</script>
</body>
</html>
