Progress.js vs nprogress：主流JS进度条库对比与选型指南

Progress.js vs nprogress：主流JS进度条库对比与选型指南

【免费下载链接】progress.jsProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.项目地址: https://gitcode.com/gh_mirrors/pr/progress.js

做前端开发时，"进度条"几乎是每个项目的标配：文件上传、页面加载、长任务等待……这时候你大概率会听到两个名字：nprogress和Progress.js。它们都是极轻量级的 JS 进度条库，但设计思路完全不同。本文带你快速搞懂Progress.js——一个帮助开发者为页面中任意元素创建和管理 CSS3 进度条的 JavaScript 库——并和 nprogress 做一次逐项对比，帮你 5 分钟完成选型。

📌 先认识一下 Progress.js

Progress.js是一个基于 JavaScript + CSS3 的进度条管理库，最大特点是：进度条不是只能贴在页面顶部，而是可以"贴"在页面上任何一个元素上。

比如上传组件正在传文件，你想让进度条就浮在上传按钮上方；或者某个卡片正在加载数据，想让进度条盖在这个卡片上——Progress.js 都能做到，而且多个元素可以同时各有一条独立的进度条。

项目核心文件很小，结构一目了然：

• 主库源码：src/progress.js
• 样式与主题：src/progressjs.css
• 生产环境压缩版：minified/progress.min.js 和 minified/progressjs.min.css
• 使用说明：README.md

整个库零依赖，压缩后只有几 KB，支持 CommonJS、AMD 和浏览器全局变量三种加载方式（见 src/progress.js#L9-L20）。

⚖️ Progress.js vs nprogress：核心差异一览

一句话总结：nprogress 是"全局氛围条"，Progress.js 是"元素级进度条"。

🔍 逐个功能细看

1️⃣ 目标元素：任意元素 vs 顶部全局条

nprogress 的经典效果是页面顶部那根细长的进度条（Google 首页同款），适合 SPA 路由切换时给个"正在加载"的氛围感。但它的进度条只能是全局那一条。

Progress.js 则通过一个简单的入口函数选择目标：不传参数就是整页（body），传选择器字符串就定位到具体元素（实现见 src/progress.js#L459-L476）。比如给某个上传卡片单独加进度条：

progressJs("#uploadCard").start();

对 body 元素它会使用fixed定位跟随视口，对其他元素使用absolute精确定位（见 src/progress.js#L97-L101），窗口缩放时宽度会自动跟随。

2️⃣ 进度控制：真实进度 vs 模拟进度

nprogress 的inc()本质是"往前推一点"，你不知道现在到底 60% 还是 80%，它擅长的是不确定时长的模糊反馈。

Progress.js 提供了一整套确定性 API（见 src/progress.js#L522-L545）：

• start()：创建并启动进度条
• set(60)：直接设定到 60%
• increase(10)：在当前基础上加 10%
• autoIncrease(5, 500)：每 500 毫秒自动增加 5%
• end()：补满到 100% 后优雅退场，kill()：立即移除
• 链式回调onprogress、onbeforestart、onbeforeend方便与业务逻辑联动

上传文件这种"我知道真实进度"的场景，Progress.js 明显更合适。

3️⃣ 外观主题：内置 6 套，换模板只需一行

Progress.js 的样式集中在 src/progressjs.css，内置blue、blueOverlay、blueOverlayRadius、blueOverlayRadiusHalfOpacity、blueOverlayRadiusWithPercentBar、blackRadiusInputs6 套主题，覆盖了细线条、整块遮罩、圆角、半透明遮罩、带百分比数字等风格。切换主题只需调用setOption：

progressJs().setOption('theme', 'blueOverlayRadius').start();

nprogress 想换外观则基本要自己写 CSS 覆盖默认类。

🎯 三种典型场景，该怎么选？

简单决策口诀："全局氛围感"选 nprogress，"元素级、真实进度"选 Progress.js。如果项目里两者都要用，它们互不冲突，完全可以共存。

🚀 30 秒上手 Progress.js

1. 在页面引入库文件（生产环境建议用 minified 目录下的压缩版）：

<link rel="stylesheet" href="minified/progressjs.min.css"> <script src="minified/progress.min.js"></script>

2. 调用 API（完整用法见 README.md）：

// 整页进度条 progressJs().start(); // 或者指定元素，并精确控制进度 var bar = progressJs("#uploadBtn").start(); bar.set(40); bar.increase(15); bar.end(); // 完成后自动补满并退场

构建方面，仓库提供了 Makefile，安装依赖后执行make build即可重新压缩静态资源。

📝 总结

• Progress.js：进度条可以贴在任意元素上、支持多条独立进度、精确控制真实百分比、内置多套主题，适合上传/任务类需要"真进度"的功能场景；
• nprogress：顶部全局氛围条的标杆，写法极简，适合 SPA 路由切换等"模糊加载"场景；
• 两者都是零依赖、MIT 协议的轻量库，体积差异可以忽略——选型关键不是"哪个更好"，而是"你的进度条该出现在哪里、进度是否已知"。

希望这份对比能帮你少走弯路。如果项目同时存在两类需求，直接把两个库组合起来用，就是最务实的答案。

【免费下载链接】progress.jsProgressJs is a JavaScript and CSS3 library which help developers to create and manage progress bar for every objects on the page.项目地址: https://gitcode.com/gh_mirrors/pr/progress.js