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

       前言

       之前已经出了一篇关于loading动画的随笔《博客园美化:给网页加上loading动画》,但是每次加载都必须等loading动画加载完成才能进行下一步点击,很浪费时间,所以pass掉了......

这次做了一个顶部的loading进度条,加载的同时不影响浏览点击网页,并且进度条颜色十分酷炫  非主流  的那种。

话不多说,

先上效果图:

        酷炫吧......😄

页首HTML代码附上:

 1 <script type="text/javascript">
 2         
 3     var loadProcess = function (config) {
 4     var count = 0;
 5     var id = config.id;
 6     var divTxt = "#"+id ;
 7     /*loading进度条样式*/
 8         $("body").prepend('<div id="' + id + '" style="width: 0%; height:8px; 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 </script>
22 <script type="text/javascript">
23     /*需要放在body标签后面,然后在适当的位置调用updateProcess方法*/
24     var p = new loadProcess({"id":"loading"});
25     p.updateProcess(30);
26     p.updateProcess(57);
27     p.updateProcess(60);
28     p.updateProcess(70);
29     p.updateProcess(80);
30     p.updateProcess(100);
31 </script>

 

posted @ 2024-05-18 17:15  Shu_HowZ  阅读(55)  评论(1编辑  收藏  举报
  • 首页
  • 关于
  • 友链
  • 留言板
  • Timeline
  • Mail
  • 发消息
  • 微信
  • QQ
  • 微博
  • Github
  • 百度
  • 宝藏网盘
  • 照片
  • 后台管理