NProgress进度条插件

NProgress是页面加载是进度条插件

安装：

NPM安装

npm install --save nprogress

Yarn安装

yarn add nprogress

引入：

直接引入：

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

使用：

NProgress.start(); // 开启进度条
NProgress.done();  // 关闭进度条

可以通过调用 .set(n)来设置进度：

NProgress.set(0.0);     // same as .start()
NProgress.set(0.4);
NProgress.set(1.0);   // same as .done()

可以使用inc()随机增长进度条，注意，这个方法永远不会让进度条达到100%。

NProgress.inc();

vue 跳转加载进度条

//导入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import router from './router'

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

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

插件配置:

minimum：开始时的最低百分比（默认0.08）
template： 进度条自定义HTML，
easing & speed： 动画设置，接收CSS3 缓冲动画字符串，以及动画速度
trickle：设置自动递增的默认行为（默认true）
trickleSpeed：进度条默认速度
showSpinner：是否显示右上角螺旋加载提示
parent：父容器（默认body）

NProgress.configure({
mininum:0.1,
template: "<div role='bar' class='....'>...</div>",
easing: 'ease',
speed: 500,
trickle: false,
trickleSpeed: 200,
showSpinner: false,
parent: '#container'
})