NProgress 进度条

发布时间 2025-12-10 14:05:06

最后更新 2025-12-17 11:47:05

阅读量加载中...

在项目中安装 nprogress

npm

     bash
    
  
# 安装 NProgress
npm install nprogress

# 安装 TypeScript 类型
npm install --save-dev @types/nprogress

yarn

     bash
    
  
# 安装 NProgress
yarn add nprogress

# 安装 TypeScript 类型
yarn add --dev @types/nprogress

pnpm

     bash
    
  
# 安装 NProgress
pnpm add nprogress

# 安装 TypeScript 类型
pnpm add -D @types/nprogress

简单封装

在项目中合适的位置创建一个 ts 文件，例如src/utils/nprogress.ts

示例代码如下：

     ts
    
  
import NProgress from "nprogress";
import "nprogress/nprogress.css";

NProgress.configure({
  easing: "ease", // 动画方式
  speed: 500, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.3, // 初始化时的最小百分比
  // parent: "body", // 指定进度条的父容器 - 默认是 body
});

export default NProgress;

也可以继续封装两个快捷方法：

     ts
    
  
// 打开进度条
export const start = () => {
  NProgress.start();
};

// 关闭进度条
export const close = () => {
  NProgress.done();
};

使用进度条

在需要使用进度条的地方，例如路由守卫中，引入封装的方法：

     ts
    
  
import NProgress from "@/utils/nprogress";

// 创建路由实例
const router = createRouter({
  routes,
  history: createWebHistory(),
});

// 前置路由守卫
router.beforeEach((to, from) => {
  NProgress.start();
});

// 后置路由守卫
router.afterEach(() => {
  NProgress.done();
});

ps：也可以考虑在 axios 中使用进度条

定制进度条样式

代码参考

     css
    
  
#nprogress .bar {
  background: var(--el-color-primary) !important;
}

#nprogress .spinner-icon {
  border-top-color: var(--el-color-primary) !important;
  border-left-color: var(--el-color-primary) !important;
}

#nprogress .peg {
  box-shadow: 0 0 10px var(--el-color-primary), 0 0 5px var(--el-color-primary) !important;
}

#Nprogress #Vue3