NProgress进度条简单使用

安装

• 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 });
通过 ease(一个 CSS 中的 easing 值) 调整动画设置和速度 speed （毫秒ms）
NProgress.configure({ ease: ‘ease’, speed: 500 });
关闭进度条步进，设置 trickle 为 false。
NProgress.configure({ trickle: false });
调整 trickleRate (每次步进增长多少) 和 trickleSpeed (步进间隔，单位毫秒ms)
NProgress.configure({ trickleRate: 0.02, trickleSpeed: 800 });
禁用进度环，设置 showSpinner 为 false
NProgress.configure({ showSpinner: false });

改变进度条颜色

在NProgress.start();函数前，改变样式的颜色：

#nprogress .bar {
background: #29d !important;
}

实际项目中使用

// router/index.js
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

NProgress.configure({ showSpinner: false })

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})