NProgress.js全站jquery进度条插件

相信很多友友都发现，移动设备的浏览器都有一条蓝色或者是红色的loading加载进度条，它会在你切换页面时出现，但是在网页上实现可不多见。不过，有了 NProgress 这个 jQuery 插件，你也可以轻松实现！

一、NProgress介绍

这是来自菲律宾马尼拉的[Rico Sta Cruz] (http://ricostacruz.com/)实现了Medium和YouTube等知名网站最近开始采用的全站进度条UI模式，并以MIT许可证开源。

这个项目在GitHub上Fork过百，Star超过2400，算是比较火的新项目了。

二、安装插件

添加 jQuery (1.8 or above)，nprogress.js 和 nprogress.css 到你的项目中。

三、使用方法

简单的调用 start() 和 done() 方法来控制进度条。

1. NProgress.start();
2. NProgress.done();

当然也可以这样：

1. $(document).on('page:fetch', function() { NProgress.start(); });
2. $(document).on('page:load', function() { NProgress.done(); });

建议

• 添加这个到有AJAX调用的地方！绑定到 jQuery ajaxStart 和 ajaxComplete 事件上。
• 在不使用 Turbolinks/Pjax 的情况下做一个有特效的进度条事件！ 绑定到  $(document).ready 和 $(window).load。

四、配置插件

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

1. NProgress.configure({ minimum: 0.1 });

你可以通过 template 修改标记结构。为了保证进度条正常工作，需要一个包含 role=’bar’ 属性的元素。

1. NProgress.configure({
2.   template: "..."
3. });

通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）。

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

想关闭进度条步进？设置 trickle 为 false。

1. NProgress.configure({ trickle: false });

你可以调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms).

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

想禁用进度环？设置 showSpinner 为 false。

1. NProgress.configure({ showSpinner: false });

NProgress: 在javascript中显示进度条。

五、如何获取

NProgress官网 | Github 项目