README

安装

Composer

composer require gaomingcode/nprogress

原始ReadMe

极简进度条

为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+，并使用以下方法：（在这里解释here）

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

Turbolinks (版本 3 及以下)

确保您使用的是Turbolinks 1.3.0+，并使用以下方法：（在这里解释here）

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

Pjax

尝试以下方法：（在这里解释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);     // Sorta same as .start()
NProgress.set(0.4);
NProgress.set(1.0);     // Sorta same as .done()

递增：要递增进度条，只需使用 .inc()。这将以随机数量递增。这永远不会达到100%：对于每个图像加载（或类似操作）使用它。

NProgress.inc();

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

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 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

调整trickle/increment的频率，单位为毫秒。

NProgress.configure({ trickleSpeed: 200 });

showSpinner

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

NProgress.configure({ showSpinner: false });

parent

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

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

自定义

只需编辑 nprogress.css 即可。提示：您可能只想找到并替换 #29d 的出现。

包含的CSS文件相当简洁... 实际上，你可以随意删除它并创建自己的版本！

资源

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

支持

问题和请求：通过项目的issue跟踪器提交。

问题：在带有标签nprogress的StackOverflow上提问。

聊天：加入我们的gitter.im。

感谢

NProgress © 2013-2017, Rico Sta. Cruz。在MIT许可证下发布。
由Rico Sta. Cruz编写和维护，并得到贡献者的帮助。

ricostacruz.com  ·  GitHub @rstacruz  ·  Twitter @rstacruz