样式：
1<style type="text/css"> 2 .processcontainer2{ 3 width:450px; 4 border:1px solid #6C9C2C; 5 height:25px; 6 border-radius: 10px; 7 box-shadow: 5px 10px 20px lightgray; 8 } 9 #processbar2{ 10 background:green; 11 float:left; 12 height:100%; 13 text-align:center; 14 line-height:150%; 15 border-radius: 10px; 16 color: white; 17 } 18</style>
关键HTML代码：
1<body> 2 <div class="processcontainer2"> 3 <div id="processbar2">0</div> 4 </div> 5</body>
脚本：
1<script type="text/javascript" src="js/jquery-1.11.3.js" ></script> 2 <script type="text/javascript"> 3 function gogogo(){ 4 var bar=$("#processbar2"); 5 $(bar).html(parseInt($(bar).html())+1+"%") 6 $(bar).css("width",$(bar).html()) 7 console.log($(bar).html()) 8 //进度条满 9 if($(bar).html()=="100%"){ 10 window.clearInterval(start); 11 } 12 } 13 var start=setInterval(function(){gogogo()},50); 14 $(document).ready(function(){ 15 start; 16 }) 17 </script>
效果：
