Vue使用NProgress

Vue使用NProgress

给项目加上进度条效果

安装

npm install nprogress --save

安装完之后重启项目

引入库和css样式

不引入css会没效果

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

使用方式

NProgress.start() // 开启
NProgress.done() // 关闭

关闭右上角螺旋加载效果

NProgress.configure({
  minimum: 0.08,
  showSpinner: true,
  showSpinner: false // 显示右上角螺旋加载提示
  // parent: '#box1'
})   

自定义进度条颜色

/* 进度条加载自定义颜色 */
#nprogress .bar {
  background: orange !important;
}