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

       前言

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

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

话不多说，

先上效果图：

        酷炫吧......😄

页首HTML代码附上：

<script type="text/javascript">
        
    var loadProcess = function (config) {
    var count = 0;
    var id = config.id;
    var divTxt = "#"+id ;
    /*loading进度条样式*/
        $("body").prepend('<div id="' + id + '" style="width: 0%; height:8px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);"></div>' );
    
    /*更新进度条*/
    this.updateProcess = function (percent) {
    setTimeout(function () { $(divTxt).animate({ width: percent + "%" }) }, ++count * 500);
    if (percent == 100) {           /*100%就从页面移除loading标签*/
        setTimeout(function () {
            $(divTxt).hide(500);
                setTimeout(function () { $(divTxt).remove() }, 500);
                }, count * 500 + 800);
            }
        };
    }
</script>
<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>