官网文档大概翻译了下，部分内容按照小编的语言习惯做了调整。

安装

npm i nprogress

主页

github.com/rstacruz/nprogress

资料库

github.com/rstacruz/nprogress

NProgress

适用于Ajax 类型应用程序的超薄进度条。灵感来自Google，YouTube和Medium。

安装

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

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

NProgress可通过bower以及npm和spm获得。

$ bower install --save nprogress
$ npm install --save nprogress

基本用法

只需调用start()和done()以控制进度栏。

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

使用Turbolinks或类似的东西？确保您使用的是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(); });

提示

• 为您的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);     //  这将获取当前状态值并添加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>"
});

CSS动画属性 easing 和 speed

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

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

自动递增 trickle

通过将此设置为来关闭自动递增行为false。（默认值：true）

NProgress.configure({ trickle: false });

进度条增加幅度和频率 trickleRate trickleSpeed

单位分别是 百分比、毫秒

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

？ showSpinner

额，这是个啥？没明白。

NProgress.configure({ showSpinner: false });

父级容器parent

指定父容器。（默认值：body）

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

定制化

只需nprogress.css根据自己的喜好进行编辑。提示：您可能只想查找和替换出现的#29d。

随附的CSS文件非常小...实际上，请随意对其进行剪贴，并自行制作！