Nprogress使用教程

官方文档

NProgress 是一个轻量的页面顶部加载进度条库，常用于 SPA 路由切换、Ajax 请求时提示用户”页面正在加载”。它依赖 requestAnimationFrame 自动添加过渡动画，体积小、无依赖。

安装

npm install nprogress

使用

import "nprogress/nprogress.css";
import NProgress from "nprogress";
NProgress.configure({ showSpinner: false });
// 显示进度条
NProgress.start();
// 隐藏进度条
NProgress.done();

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

在 Vue Router 中使用

router.beforeEach((to, from, next) => {
  NProgress.start(); // 路由跳转前显示进度条
  next();
});
router.afterEach(() => {
  NProgress.done(); // 跳转完成后关闭
});

常用配置

NProgress.configure({
  showSpinner: false, // 关闭右上角加载图标
  minimum: 0.1, // 起始最小百分比
  easing: "ease", // 动画缓动方式
  speed: 200, // 动画速度
  trickleSpeed: 200, // 自动递增间隔
});

API 一览

方法	说明
NProgress.start()	开始显示进度条，从 0 开始自动递增
NProgress.done()	进度到 100% 并隐藏进度条
NProgress.set(n)	手动设置进度值（0 ~ 1）
NProgress.inc(n?)	按指定量递增（默认随机小增量）
NProgress.configure(obj)	全局配置（是否显示 spinner、动画参数等）

自定义进度条样式

NProgress 默认显示在页面顶部，可通过 CSS 修改 #nprogress .bar 的高度与颜色，使其融入站点主题：

#nprogress .bar {
  background: #409eff; /* 改为站点主题色 */
  height: 3px;
}

CodePen 示例