<!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>