给网站顶部加一个进度条(适用于Pjax)

很多网站使用了Pjax无刷新加载 顶部没有页面加载进度,为了美观丶流畅感觉可以加进去,分享写个教程给大家

首先创建一个js文件引入(把以下js代码放进去)
注意:引入到jquery.js的下面

JS代码

在创建一个css文件 引入

把以下css代码放进去)

#nprogress{pointer-events:none}
#nprogress .bar{background:#73aaff;position:fixed;z-index:99999;top:0;left:0;width:100%;height:2px;}
#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;opacity:1;transform:rotate(3deg) translate(0,-4px);}

最后加入pjax 重载函数

$(document).on('pjax:send', function() {
NProgress.start()
});

$(document).on("pjax:complete", function () {
NProgress.done();
});

 

温馨提示:本文最后更新于2023-12-24 12:40:13,某些文章具有时效性,若有错误或已失效,请私信客服或联系知新社长
© 版权声明
四月 24

知岛上的今时往日

    "吼吼~,往年的今天,作者不知道跑哪里偷懒去了~"
THE END
喜欢就支持一下吧
点赞0赞赏 分享
评论 共7条
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

夸夸Ta
夸夸
还有吗!没看够!
取消
昵称表情代码图片
    • 的头像-知新网xiaowe0
    • 的头像-知新网lx01250
    • 的头像-知新网xiaoqida0
    • 的头像-知新网小酷0
    • 的头像-知新网星恬0
    • 的头像-知新网静鱼客栈0
    • 的头像-知新网kun660
社区求救信号帮助是一种美德