NProgress是一个适用于Ajax应用的进度条

NProgress

适用于 Ajax 应用的精简进度条。灵感源自 Google、YouTube 和
Medium。

安装

将 nprogress.js 和 nprogress.css 添加到您的项目中。

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

NProgress 可通过 bower 和 npm 获取。

$ npm install --save nprogress

也可以通过 unpkg CDN 获取：

• https://unpkg.com/nprogress@0.2.0/nprogress.js
• https://unpkg.com/nprogress@0.2.0/nprogress.css

基本用法

只需调用 start() 和 done() 即可控制进度条。

NProgress.start();
NProgress.done();

Turbolinks（版本 5+）

请确保您使用的是 Turbolinks 5+，并使用此方法：（此处 说明）

$(document).on('turbolinks:click', function() {
  NProgress.start();
});
$(document).on('turbolinks:render', function() {
  NProgress.done();
  NProgress.remove();
});

Turbolinks（版本 3 及以下）

请确保您使用的是 Turbolinks 1.3.0+ 版本，并使用此方法：（此处 说明）

$(document).on('page:fetch',   function() { NProgress.start(); });
$(document).on('page:change',  function() { NProgress.done(); });
$(document).on('page:restore', function() { NProgress.remove(); });

Pjax

Try this: (explained here)

$(document).on('pjax:start', function() { NProgress.start(); });
$(document).on('pjax:end',   function() { NProgress.done();  });

思路

• 为你的 Ajax 调用添加进度条！将其绑定到 jQuery 的 ajaxStart 和 ajaxStop 事件。

• 即使没有 Turbolinks/Pjax，也能制作精美的加载条！将其绑定到 $(document).ready 和 $(window).load。

高级用法

百分比： 要设置进度百分比，请调用 .set(n)，其中 n 是 0..1 之间的数字。

NProgress.set(0.0); // 类似于 .start()
NProgress.set(0.4);
NProgress.set(1.0); // 类似于 .done()

递增： 要递增进度条，只需使用 .inc()。这会将进度条的增量设置为随机数。这永远不会达到 100%：请在每次加载图片（或类似情况）时使用它。

NProgress.inc();

如果您想按特定值递增，可以将其作为参数传递：

NProgress.inc(0.2); // 这将获取当前状态值，并使其加 0.2，直到状态达到 0.994

强制完成： 通过将 true 传递给 done()，即使没有显示进度条，也会显示进度条。（默认行为是，如果未调用 .start()，.done() 将不会执行任何操作。）

NProgress.done(true);

获取状态值： 要获取状态值，请使用 .status。

配置

minimum

更改启动时使用的最小百分比。 （默认值：0.08）

NProgress.configure({ minimum: 0.1 });

template

您可以使用 template 更改标记。为了保持进度条正常工作，请在其中保留一个带有 role='bar' 的元素。请参阅默认模板以供参考。

NProgress.configure({
template: "<div class='....'>...</div>"
});

easing 和 speed

使用 easing（CSS 缓动字符串）调整动画设置
和 speed（以毫秒为单位）。（默认值：ease 和 200）

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

trickle

设置为 false 关闭自动递增行为。（默认值：true）

NProgress.configure({ trickle: false });

trickleSpeed

调整缓动/递增频率，以毫秒为单位。

NProgress.configure({ trickleSpeed: 200 });

showSpinner

设置为 false 关闭加载旋转器。 （默认值：true）

NProgress.configure({ showSpinner: false });

parent

指定此项可更改父容器。（默认值：body）

NProgress.configure({ parent: '#container' });

自定义

只需根据您的喜好编辑 nprogress.css 即可。提示：您可能只想查找并替换 #29d 的出现位置。

附带的 CSS 文件非常精简……事实上，您可以随意删除它并创建您自己的 CSS 文件！

资源

• 新的 UI 模式：网站加载栏 (usabilitypost.com)

谢谢

NProgress © 2013-2017, Rico Sta. Cruz.根据 MIT 许可证 发布。

由 Rico Sta. Cruz 创作并维护，并得到 [贡献者] 的协助。