NProgress.js 简介

NProgress.js 是一款轻量级的页面加载进度条 JavaScript 库，通过模拟 YouTube 和 Medium 风格的加载动画，帮助开发者优化网页加载体验。它具备以下特点：
轻量高效：仅 3KB（压缩后），无第三方依赖
高度可定制：支持进度条颜色、高度、动画速度等样式调整
易用性强：简单的 API 接口，快速集成到各类项目
兼容性好：支持现代浏览器及主流框架（React/Vue/Angular等）

安装方法

方式 1：CDN 引入

<link href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet" />
<src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js">

方式 2：npm/yarn 安装

npm install nprogress
# 或
yarn add nprogress

// 在项目中引入
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

基础使用方法

初始化配置（可选）

// 配置进度条
NProgress.configure({
minimum: 0.08,           // 初始进度（默认0.08）
easing: 'ease',          // 动画曲线
speed: 500,              // 动画速度（ms）
showSpinner: true,       // 是否显示加载图标
trickleRate: 0.02,       // 自动递增步长
trickleSpeed: 800        // 自动递增间隔});

基本控制方法

// 启动进度条
NProgress.start();// 结束进度条
NProgress.done();// 强制完成（立即跳转到100%）
NProgress.done(true);

样式自定义

/* 修改进度条颜色 */
#nprogress .bar {
background: #ff4757 !important;}/* 修改高度 */#nprogress .bar {
height: 3px !important;}/* 隐藏加载图标 */#nprogress .spinner {
display: none !important;}

高级用法

手动控制进度

// 设置具体进度值（0-1）
NProgress.set(0.4);// 递增进度
NProgress.inc(0.2); // 增加20%

与AJAX请求结合

// 请求开始时
axios.interceptors.request.use(config => {
NProgress.start();
return config;});
// 响应返回时
axios.interceptors.response.use(response => {
NProgress.done();
return response;}, error => {
NProgress.done();
return Promise.reject(error);});

路由切换场景（以Vue Router为例）

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

实际应用场景

页面加载过渡

window.addEventListener('load', () => {
NProgress.done();});
document.addEventListener('DOMContentLoaded', () => {
NProgress.start();});

图片懒加载

const images = document.querySelectorAll('img.lazy');
images.forEach(img => {
img.addEventListener('load', () => {
NProgress.inc();
});
});

注意事项

避免重复调用：确保每个 start() 都有对应的 done()
SPA应用：需配合路由钩子使用
性能优化：复杂场景建议关闭自动递增

NProgress.configure({ trickle: false });

总结

NProgress.js 通过简洁的 API 和灵活的配置，为开发者提供了优雅的加载状态指示方案。其轻量级特性和良好的框架兼容性使其成为提升 Web 应用用户体验的理想选择。

官网地址

NProgress.js

轻量级的页面加载进度条 JavaScript 库