官网文档大概翻译了下，部分内容按照小编的语言习惯做了调整。
安装
npm i nprogress
主页
资料库
NProgress
适用于Ajax 类型应用程序的超薄进度条。灵感来自Google，YouTube和Medium。
安装
将nprogress.js和nprogress.css添加到您的项目。
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
$ 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文件非常小…实际上，请随意对其进行剪贴，并自行制作！