效果（看顶部）

安装

CSDN地址（我设置的免积分，推荐下载）：

https://download.csdn.net/download/weixin_45525272/14944311

GitHub地址：https://github.com/rstacruz/nprogres

1. 外链引入方式（将包里的 .js .css移动到工程中）

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

2. NPM安装方式

$ npm install --save nprogress
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用

1.基本用法

• 利用NProgress.start()显示进度条

NProgress.start()

• 利用NProgress.done()隐藏进度条

NProgress.done()

2.高级用法

• 设置百分比：调用 .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();

• 特定值增量：调用 .inc(n) 方法以特定值递增进度条

NProgress.inc(0.2);    // This will get the current status value and adds 0.2 until status is 0.994
• 1

• 强制完成：通过传递 true 到 .done() 方法，将显示进度条，即使它未显示（默认如果不调用 .start() 方法， .done() 方法不会做任何事）

NProgress.done(true);

• 获取状态值：使用 .status 获取状态值

NProgress.status