NProgress，前端必备进度条插件，你值得拥有

官方网站：http://ricostacruz.com/nprogress/

下载地址：https://github.com/rstacruz/nprogress

安装

依赖于 jQuery (1.8版本及以上)，添加 nprogress.js 和 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 });

你可以通过

template

修改标记结构。为了保证进度条正常工作，需要一个包含

role='bar'

属性的元素。

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

通过

ease

(一个 CSS 中的 easing 值) 调整动画设置和速度

speed

（毫秒ms）。

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

想关闭进度条步进？设置

trickle

为

false

。

NProgress.configure({ trickle: false });

你可以调整

trickleRate

(每次步进增长多少) 和

trickleSpeed

(步进间隔，单位毫秒ms).

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

想禁用进度环？设置

showSpinner

为

false

。

NProgress.configure({ showSpinner: false });

NProgress: slim progress bars in JavaScript