企业官网建设流程全解析

Progress.js自定义主题教程：如何用CSS3打造专属进度条皮肤

【免费下载链接】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

Progress.js是一款基于 JavaScript 和 CSS3 的轻量级进度条库，能为页面中的任意元素甚至整个页面添加带动画的进度条，并且完全支持自定义主题——本教程教你用几行 CSS 代码，为自己的网站打造专属进度条皮肤。

📦 一分钟认识 Progress.js

Progress.js 的核心只有两个文件：

生产环境建议使用压缩版本 minified/progress.min.js 与 minified/progressjs.min.css。

它的 API 非常精简：start()启动、set(80)跳到 80%、increase(5)增加 5%、autoIncrease()自动递增、end()完成并淡出。

🚀 三步跑起默认主题

1. 引入库文件：将progress.min.js与progressjs.min.css引入页面；
2. 一行代码启动进度条：

// 整页顶部的进度条 progressJs().start(); // 或绑定到某个具体元素 progressJs("#myCard").start();

3. 完成：默认使用blue主题——一条 2 像素的蓝色细线，带平滑过渡与淡出动画，效果类似 iOS 7。

🔍 主题机制揭秘：一行代码看懂

创建主题的关键在源码中的一行拼接逻辑：进度条容器会被加上progressjs-theme-{主题名}的 CSS 类名，见 src/progress.js。

这意味着：你在 CSS 里写什么主题名，页面就能匹配什么主题名。

内置主题一键切换

库里内置了 6 套进度条皮肤，只需调用setOption修改主题名：

progressJs("#myCard") .setOption('theme', 'blueOverlayRadius') .start();

各主题的完整样式定义可参考 src/progressjs.css。

🎨 核心教程：手写一个自定义进度条主题

自定义主题只需要写 CSS，完全不用改 JS。下面以打造一个"紫色圆角 + 百分比文字"主题为例。

第 1 步：确定主题名

选一个主题名，例如purpleBar。它必须与 CSS 中的类名.progressjs-theme-purpleBar完全一致。

第 2 步：定义进度条颜色与高度

主题的"进度填充"由内部类.progressjs-inner控制，它决定条的高度与颜色：

.progressjs-theme-purpleBar .progressjs-inner { height: 6px; background-color: #8e44ad; transition: all 0.3s ease-out; }

第 3 步：控制百分比文字显示

百分比文字位于.progressjs-percent元素，想让"37%"这样的数字显示出来，就给它加上样式：

.progressjs-theme-purpleBar .progressjs-percent { color: #fff; font-size: 12px; }

不想显示百分比？直接display: none即可，默认 blue 主题正是这样处理的，见 src/progressjs.css。

第 4 步：添加结束淡出动画

进度结束时，Progress.js 会自动追加progressjs-end类名。给它写一个淡出过渡，皮肤就有了完整的生命周期：

.progressjs-theme-purpleBar.progressjs-end { transition: opacity 0.2s ease-out; opacity: 0; }

第 5 步：启用你的新皮肤

progressJs("#myCard") .setOption('theme', 'purpleBar') .start();

搞定！你现在拥有了一个与站点配色一致的进度条皮肤。

✨ 进阶技巧：覆盖模式与动画细节

• 整层覆盖：配合.setOption('overlayMode', true)使用 Overlay 系列主题，进度条会以覆盖层铺满目标元素，适合卡片整体加载场景；
• 过渡感知：considerTransition选项（默认开启）会让结束回调等待 CSS3 动画完成后再触发，配置见 src/progress.js；
• 多主题共存：同一份 CSS 文件里可定义多个主题，让页面不同区域的进度条各穿各的"皮肤"，只需切换主题名。

❓ 常见问题速查

总结

Progress.js 自定义主题的本质是"JS 管行为，CSS 管长相"：JS 只负责进度计算与动画时机，外观则完全交给 CSS3 类名。掌握"定主题名 → 样式化.progressjs-inner→ 补.progressjs-end动画"三步套路，你就能在几分钟内做出符合项目视觉风格的专属进度条皮肤。

【免费下载链接】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