博客园美化：增加顶部炫彩loading进度条

 1 <script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
 2 <script type="text/javascript">
 3         
 4     var loadProcess = function (config) {
 5     var count = 0;
 6     var id = config.id;
 7     var divTxt = "#"+id ;
 8         $("body").prepend('<div id="' + id + '" style="width: 0%; height:5px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);"></div>' );
 9     
10     /*更新进度条*/
11     this.updateProcess = function (percent) {
12     setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);
13     if (percent == 100) {           /*100%就从页面移除loading标签*/
14         setTimeout(function () {
15             $(divTxt).hide(500);
16                 setTimeout(function () { $(divTxt).remove() }, 500);
17                 }, count * 500 + 800);
18             }
19         };
20     }
21 
22 </script>
23 
24 <script type="text/javascript">
25     
26     /*需要放在body标签后面，然后在适当的位置调用updateProcess方法*/
27     var p = new loadProcess({"id":"loading"});
28     p.updateProcess(30);
29     p.updateProcess(57);
30     p.updateProcess(60);
31     p.updateProcess(70);
32     p.updateProcess(80);
33     p.updateProcess(100);
34 </script>