效果:
ps:本站已经应用,可以直接看效果,试着点导航栏的页面或者文章页都是有的哈
步骤:
1.下载
官网下载地址:https://ricostacruz.com/nprogress/
GitHub项目地址:https://github.com/rstacruz/nprogress/
2.引入需要的 nprogress.css
和 nprogress.js
文件
<link rel="stylesheet" type="text/css" href="nprogress.css"/>
<script src="nprogress.js"></script>
3.基本用法:只需要调用NProgress的 start()
和 done()
的API来控制进度条
NProgress.start(); //显示进度条
NProgress.done(); //完成进度条
4.高级用法
百分比:调用 .set(n)
来设置进度百分比,其中n的取值范围为0~1。
NProgress.set(0.0); // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0); // Sorta same as .done()
递增:调用 .inc()
来随机增长进度条
NProgress.inc();
强制完成:通过传递 true
参数给 done()
,使进度条满格,即使它没有被显示
NProgress.done(true);
Pjax
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end', function() { NProgress.done(); });
Cuteen食用方法
在头部自定义内容中引用上述的JS和CSS
在底部自定义内容中添加所需调用的API
<script>
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end', function() { NProgress.done(); });
</script>
这个时候已经实现loading动画加载的步骤,但是前台仍有主题自带的loading动画,所以需要去删除静态文件 Main.css
内的些许代码
如果在没有自己改动过的css资源下,默认删除2026
到2108
的内容。
这是一条测试评论
这是回复测试