效果:
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();
可以通过调用 .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();
通过使用done()
让进度条关闭。
NProgress.done(true);
Pjax
$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end', function() { NProgress.done(); });
就这?我也直接搬运
淦你
就这?我直接搬运
球球你自己写吧
球球是谁,我不认识
