<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>页面加载进度条</title> <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var loadProcess = function (config) { var count = 0; var id = config.id; var divTxt = "#"+id ; $("body").prepend('<div id="' + id + '" style=" 0%; height:5px; background: green; "></div>' ); /*更新进度条*/ this.updateProcess = function (percent) { setTimeout(function () { $(divTxt).animate({ percent + "%" }) }, ++count * 500); if (percent == 100) { /*100%就从页面移除loading标签*/ setTimeout(function () { $(divTxt).hide(500); setTimeout(function () { $(divTxt).remove() }, 500); }, count * 500 + 800); } }; } </script> <style> body{margin:0px;} </style> </head> <body> <div style="border:1px solid red;100%; height:100px;"> content.......</div> </body> <script type="text/javascript"> /*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/ var p = new loadProcess({"id":"loading"}); p.updateProcess(30); p.updateProcess(57); p.updateProcess(60); p.updateProcess(70); p.updateProcess(80); p.updateProcess(100); </script> </html>