30行代码实现基于argon的pjax加载进度条

此进度条已经首先用于三硝基豆腐的博客,过去就能看到

我们都知道在pjax加载页面的过程中，如果没一个加载的提示，就会看起来很难受，瞬间拉低了主题的档次。要是加上一个进度条，情况就会好很多啦~

首先我们去argon的官网找到Progress进度条

当然要选一个自己看的顺眼的颜色啊，我们这里以success(绿色)举例

<div class="progress">
    <div class="progress-bar bg-success" role="progressbar" style="width: 60%;"></div>
</div>

这里中间的div就是进度条啦，width表示长度，100%就是跑满啦

接下来把这个进度条改成贴合在顶部的一个小绿条
首先为了让它固定不动，设置position为fixed
然后要让它铺满整个顶上的左右，我们设置top和left都为0，width为100%，并且为了让它像顶部的进度条给它加一个height，设置为5px，现在就能看到样子了。

为了让页面其他元素不挡住它，我们还需要设置一下z-index，根据其他元素来
现在我们可以写css了

#argprogress{
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    border: none;
    z-index: 105;
    overflow: hidden;
    height: 5px;
    display: flex;
    background-color: #e9ecef;
}

接下来就是构思实现功能的js了。我们需要两个函数，一个用来启动，另一个用来停止。
首先是启动的，我们获取一下页面的加载时间用来做大致进度条的行走速度

var loadingtime = window.performance.timing["loadEventEnd"] - window.performance.timing["navigationStart"]

接下来我们约定一段时间，隔上这一段时间就变一下进度条的进度，这里我用了js的setInterval来实现的。

var tick = 40
var loadingtime = window.performance.timing["loadEventEnd"] - window.performance.timing["navigationStart"]
var nowtime = 0
var clock = setInterval(function(){
    nowtime += tick
    if(nowtime > loadingtime){
    }else{
        nowprogress = Math.round(nowtime / loadingtime * 100)
        changeprogress(nowprogress)
    }
}, tick)

那么这个函数changeprogress接受的就是这个加载进度了吧，接下来写改变长度的代码

changeprogress = function(progress){
    progress -= 4
    $("#argprogress .progress-bar").css("width",`${progress}%`)
}

你可能会对这个-4感到疑惑，那是因为假如进度条加载到最后了然鹅页面还没加载完呢？给后面留出一些位置才能让人感觉到还在加载。
于是你看到了美元符号，这意味着需要引入万恶的jQuery，但是如果不想导入可以试一下原生js。
为了能让人看到进度条，我们还要在这个函数最开头加一句话

$("#argprogress").fadeIn(150)

直接突兀的进来也行，看你的个人审美了

我们现在可以开始写结束的部分了。
结束大概就两件事情，停止重复的计时和归位进度条
所以我们很方便的写出来

clearInterval(clock)
changeprogress(104)
setTimeout(function() {
    $("#argprogress").fadeOut(150)
    setTimeout(function() {
        changeprogress(-4)
    }, 150);
}, 500);

至于为什么要这么多的timeout，看起来好看就对了
然后就写完了，现在写一个把进度条释放到html里面的东东

addclass = "bg-success"
$("body").append("<style>#argprogress{position: fixed;top: 0;width: 100%;left: 0;border: none;z-index: 105;overflow: hidden;height: 5px;display: flex;background-color: #e9ecef;}</style>")
$("body").append(`<div id="argprogress" style="display:none;"><div class="progress-bar ${addclass}" style="width:0%;border: none;"></div></div>`)

这样就万无一失了

接下来放出完整代码

changeprogress = function(progress){
    progress -= 4
    $("#argprogress .progress-bar").css("width",`${progress}%`)
}
function start_progress(){
    var tick = 40
    $("#argprogress").fadeIn(150)
    var loadingtime = window.performance.timing["loadEventEnd"] - window.performance.timing["navigationStart"]
    var nowtime = 0
    var clock = setInterval(function(){
        nowtime += tick
        if(nowtime > loadingtime){
        }else{
            nowprogress = Math.round(nowtime / loadingtime * 100)
            changeprogress(nowprogress)
        }
    }, tick);
    return clock
}

function stop_progress(clock){
    clearInterval(clock)
    changeprogress(104)
    setTimeout(function() {
        $("#argprogress").fadeOut(150)
        setTimeout(function() {
            changeprogress(-4)
        }, 150);
    }, 500);
}

addclass = "bg-gradient-primary"
$("body").append("<style>#argprogress{position: fixed;top: 0;width: 100%;left: 0;border: none;z-index: 105;overflow: hidden;height: 5px;display: flex;background-color: #e9ecef;}</style>")
$("body").append(`<div id="argprogress" style="display:none;"><div class="progress-bar ${addclass}" style="width:0%;border: none;"></div></div>`)

并且我们需要在pjax上用到，那么加在pjax上

var pgid = 0
$(document).on('pjax:send', function() {
    pgid = start_progress()
})
$(document).on('pjax:complete', function() {
    stop_progress(pgid)
})

All Done!
代码测试无误放心食用

• 分类： 默认分类 主题
• 标签： 无标签