安装
// npm
npm install --save nprogress
//Yarn
yarn add nprogress
直接引入js、css或者通过cdn引入
<script src='nprogress.js'></script>
<link rel='stylesheet' href='nprogress.css'/>
使用方法
方法调用start和done
// 使用方法
NProgress.start(); // — 显示进度条
NProgress.done(); // — 结束进度条
通过调用 .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(); // — 增加一点点
通过使用done()让进度条关闭
NProgress.done(true); — 完成进度条
进度条配置
NProgress.configure配置
- 通过 minimum 来修改最小百分比
NProgress.configure({ minimum: 0.1 });
2. 通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）
```js
NProgress.configure({ ease: ‘ease’, speed: 500 });
```js
3. 关闭进度条步进，设置 trickle 为 false。
```js
NProgress.configure({ trickle: false });
4. 调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms)
```js
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
5. 禁用进度环，设置 showSpinner 为 false
```js
NProgress.configure({ showSpinner: false });
6.改变进度条颜色
在使用start()函数前，改变样式的颜色：
#nprogress .bar {
background: #29d !important;
}
示例
// router/index.js
import { createWebHistory, createRouter } from 'vue-router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
NProgress.configure({ showSpinner: false })
router.beforeEach((to, from, next) => {
NProgress.start()
next()
})
router.afterEach(() => {
NProgress.done()
})