- A+
所属分类：Web前端
之前已经出了一篇关于loading动画的随笔《博客园美化：给网页加上loading动画》，但是每次加载都必须等loading动画加载完成才能进行下一步点击，很浪费时间，所以pass掉了......
这次做了一个顶部的loading进度条，加载的同时不影响浏览点击网页，并且进度条颜色十分酷炫（ 非主流 ）的那种。
话不多说，先上效果图：
酷炫吧......?
页首HTML代码附上：
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>
