此进度条已经首先用于三硝基豆腐的博客,过去就能看到
我们都知道在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!
代码测试无误放心食用
Lius · 2020-04-16 13:36
万 恶 的 p j a x(暗指性能杀手)
Rorical · 2020-04-16 13:38 作者
为了丝滑~~~~~~~~~的体验
性能消耗又算得了神马呢[滑稽]