NProgress.js网页加载进度条插件

NProgress介绍

仿Google, YouTube, and Medium网站ajax加载进度条特效

插件安装

依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 nprogress.css 到你的项目中

<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>

插件方法

NProgress.start() // 显示进度条

NProgress.set(0.4) // 设置百分比

NProgress.inc() //一点点增加

NProgress.done() // 完成进度条

你也可以...

添加到你调用 Ajax 的地方！绑定它到 jQuery ajaxStart 和 ajaxStop 事件上
没有 Turbolinks/Pjax 一样可以制造一个美妙的进度条！把它绑定到 $(document).ready 和$(window).load

配置插件

通过 minimum 来修改最小百分比。

NProgress.configure({ minimum: 0.1 });

NProgress.configure({
  template: "..."
});

NProgress.configure({ ease: 'ease', speed: 500 });

NProgress.configure({ trickle: false });

NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });

NProgress.configure({ showSpinner: false });