在发起网络请求的时候通常都会出现一种友好的提示方式，告知用户应用或系统处于网络请求状态，而加载条更适合于内容的加载，更好的提示方式，还能实现模拟进度的功能，在各大网站都有相似的功能

相关地址

官方示例网址

Github仓库地址（有文档）

安装

npm install nprogress

全局配置

如果在全局使用，直接在main.js中配置（不推荐）

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

// 加载条配置
NProgress.configure({
  // 默认出现进度，默认0.08
  minimum: 0.3,
  // 动画方式
  easing: 'ease',
  // 动画时间，默认200
  speed: 300,
  // 前进间隔时间
  trickleSpeed: 50,
  // 右上角是否显示加载圈
  showSpinner: false,
})
// 挂载到全局
app.config.globalProperties.nprogress = NProgress

使用方式

import { getCurrentInstance, reactive } from 'vue'
let { proxy } = getCurrentInstance()

function progressStart() {
  // 进度开始
  proxy.nprogress.start()
}

function progressDowm() {
  // 进度关闭
  proxy.nprogress.done()
}

局部配置

创建一个工具类util/Load.js

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

// 加载条配置
NProgress.configure({
  // 默认出现进度，默认0.08
  minimum: 0.3,
  // 动画方式
  easing: 'ease',
  // 动画时间，默认200
  speed: 300,
  // 前进间隔时间
  trickleSpeed: 50,
  // 右上角是否显示加载圈
  showSpinner: false,
})

// 开始
function loadStart() {
  NProgress.start()
}

// 结束
function loadEnd() {
  NProgress.done()
}

export {loadStart, loadEnd}

使用方式

import {loadStart, loadEnd} from "../util/Load.js";

loadStart()

loadEnd()

颜色调整

在全局样式文件中加入

/* 加载条 */
#nprogress .bar {
  background-color: #36ad6a !important;
  border-radius: 5px;
}
#nprogress .peg {
  box-shadow: 0 0 10px #36ad6a, 0 0 5px #36ad6a !important;
}