今天在回答一个网友的问题时，学习了一下进度条的制作，其实也简单，是用jQuery的animate来实现的。
这是animate的的文档，进度条里主要用到了step和complete两个属性：http://jquery.bootcss.com/animate/
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{margin: 0; padding: 0;} 8 .progress{width: 100%; height: 16px; background-color: #CCC; position: relative;} 9 .progress .ibar {width: 0px; height: 16px; background-color: #9370DB; position: absolute;} 10 .progress .num{position: absolute; left: 50%; margin-left: -10px;} 11 </style> 12 </head> 13 <body> 14 <div class="content"> 15 <div class="progress" id="process"> 16 <div class="ibar" id="ibar"></div> 17 <div class="num" id="num">0%</div> 18 </div> 19 </div> 20 </body> 21 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 22 <script language = "JavaScript"> 23 $(function(){ 24 $("#ibar").animate( 25 {"width":"100%"}, 26 { 27 duration:3000, 28 easing:"linear", 29 step: function(now, fx){ 30 $("#num").html(parseInt(now)+"%"); 31 }, 32 complete:function(){ 33 $("#process").fadeOut(); 34 } 35 } 36 ) 37 }) 38 </script> 39 </html>