Progress.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.jsProgress.js 是一个轻量级的 JavaScript CSS3 进度条库它可以让页面上的任意元素都拥有一条独立、互不干扰的进度条。无论你是做下载列表、表单提交反馈还是文件上传面板都能用几行代码为每个目标元素精确控制进度条的启动、增长、主题与收尾。 快速上手3 行代码让进度条跑起来如果你本地还没有源码可以先克隆仓库git clone https://gitcode.com/gh_mirrors/pr/progress.js接入页面只需两步引入样式与脚本开发期使用 src/progress.js 和 src/progressjs.css生产环境务必换成压缩版 minified/progress.min.js 和 minified/progressjs.min.css在页面中执行启动代码// 整页进度条 progressJs().start(); // 或只针对某个元素 progressJs(#targetElement).start();就是这么简单——进度条会出现在页面顶部宽度随百分比平滑推进数字还会带滚动动画。 任意页面元素独立控制一切的秘密都在定位Progress.js 最强大的地方是它能为每个元素单独创建一条进度条彼此完全独立。它的内部机制是每个目标元素被绑定一个唯一的data-progressjs编号进度条容器按编号对号入座见 _setProgress 实现目标为body时使用fixed定位其他元素使用absolute定位自动算出元素的偏移与宽度见 定位逻辑三种指定目标元素的方式方式写法示例适用场景不传参数progressJs()整页进度如页面加载CSS 选择器progressJs(.upload-item)批量选中同类元素内部走querySelectorAll匹配到几个就生成几条进度条DOM 元素对象progressJs(document.getElementById(box))已持有元素引用时典型实战——为下载列表里每一项挂上独立进度条var bar progressJs(.download-item); // 列表每一项各有一条 bar.onprogress(function (el, percent) { console.log(el, percent); // 哪个元素、多少百分比都能区分 }); bar.start();由于选择器支持匹配多个元素一个操作、多元素各自独立推进天然成立这正是 工厂函数的目标解析逻辑 所为。 常用进度条方法一览精确掌控每一次变化所有方法都支持链式调用均返回this完整定义见 原型方法区方法作用一句话说明start()启动进度条初始进度为 1%平滑动画起步set(30)直接设置百分比一次跳到 30%数字带滚动动画increase(10)增量推进在当前位置上 10%autoIncrease(5, 300)自动递增每 300ms 自动 5%适合耗时任务end()优雅结束先补足到 100%再淡出移除kill()立即移除任务失败时直接干掉不留尾巴 实战组合拳上传任务启动时autoIncrease收到服务端真实进度时改用set成功走end()、出错走kill()——四种状态全部覆盖。⚠️ 小提醒autoIncrease的定时器由内部统一管理调用end()或kill()时会自动清除不会内存泄漏。⚙️ 进度条主题定制6 种内置风格 覆盖层模式进度条外观由theme选项控制默认是 iOS 风格细线条的blue见 默认配置。主题样式文件 内置了 6 套风格主题名效果blue经典蓝色细线默认blueOverlay蓝色半透明覆盖层遮住整个元素blueOverlayRadius覆盖层 圆角blueOverlayRadiusHalfOpacity圆角覆盖层 半透明遮罩blueOverlayRadiusWithPercentBar覆盖层 大号百分比数字blackRadiusInputs黑色圆角条适合输入框类组件切换主题只需在启动前配置并可搭配overlayMode让进度条以覆盖层形式铺满目标元素progressJs(#uploadBox) .setOption(theme, blueOverlayRadiusHalfOpacity) .setOption(overlayMode, true) .start();想要自己的品牌色往样式文件里照葫芦画瓢加一段.progressjs-theme-你的主题名规则即可无需改 JS 一行代码。 进度回调事件用 onprogress 捕捉每一次变化Progress.js 提供三个钩子全部在 原型方法区 定义onbeforestart(回调)进度条创建前触发适合记录任务开始onprogress(元素, 百分比)每次进度变化都会回调且携带当前元素引用——多元素场景下判断谁到 50% 了靠它onbeforeend(回调)结束前触发。配合considerTransition选项默认开启它会等 CSS 过渡动画真正结束再执行回调var bar progressJs(#uploadBox); bar.onprogress(function (el, percent) { if (percent 80) statusText.textContent 即将完成…; }); bar.onbeforeend(function () { statusText.textContent 上传成功; }); bar.start();✅ 新手避坑清单元素必须先存在选择器匹配不到元素时会直接抛出There is no element with given selector错误请在元素渲染完成后再调用进度有上下限起步 1%上限自动封顶 100%见 溢出保护不用手动 clamp重复 start 会被忽略元素已有data-progressjs标记时不会重复创建进度条天然防抖生产环境用压缩版本地开发跑完后把引用换成minified目录下的文件修改源码后记得构建仓库提供了 Makefile执行make build即可重新压缩静态资源需先npm install 总结Progress.js 把给任意页面元素挂独立进度条这件常见却琐碎的需求压缩成了start/set/increase/autoIncrease/end/kill六个动词再加 6 套内置主题和 3 个回调钩子。体积小、无依赖、链式 API 好记是前端项目里控制多元素进度的一个优雅解法。完整用法参见项目说明 README.md。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/4 11:10:36 · 阅读 1.2k Progress.js进阶实战：如何为任意页面元素独立控制进度条
Progress.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.jsProgress.js 是一个轻量级的 JavaScript CSS3 进度条库它可以让页面上的任意元素都拥有一条独立、互不干扰的进度条。无论你是做下载列表、表单提交反馈还是文件上传面板都能用几行代码为每个目标元素精确控制进度条的启动、增长、主题与收尾。 快速上手3 行代码让进度条跑起来如果你本地还没有源码可以先克隆仓库git clone https://gitcode.com/gh_mirrors/pr/progress.js接入页面只需两步引入样式与脚本开发期使用 src/progress.js 和 src/progressjs.css生产环境务必换成压缩版 minified/progress.min.js 和 minified/progressjs.min.css在页面中执行启动代码// 整页进度条 progressJs().start(); // 或只针对某个元素 progressJs(#targetElement).start();就是这么简单——进度条会出现在页面顶部宽度随百分比平滑推进数字还会带滚动动画。 任意页面元素独立控制一切的秘密都在定位Progress.js 最强大的地方是它能为每个元素单独创建一条进度条彼此完全独立。它的内部机制是每个目标元素被绑定一个唯一的data-progressjs编号进度条容器按编号对号入座见 _setProgress 实现目标为body时使用fixed定位其他元素使用absolute定位自动算出元素的偏移与宽度见 定位逻辑三种指定目标元素的方式方式写法示例适用场景不传参数progressJs()整页进度如页面加载CSS 选择器progressJs(.upload-item)批量选中同类元素内部走querySelectorAll匹配到几个就生成几条进度条DOM 元素对象progressJs(document.getElementById(box))已持有元素引用时典型实战——为下载列表里每一项挂上独立进度条var bar progressJs(.download-item); // 列表每一项各有一条 bar.onprogress(function (el, percent) { console.log(el, percent); // 哪个元素、多少百分比都能区分 }); bar.start();由于选择器支持匹配多个元素一个操作、多元素各自独立推进天然成立这正是 工厂函数的目标解析逻辑 所为。 常用进度条方法一览精确掌控每一次变化所有方法都支持链式调用均返回this完整定义见 原型方法区方法作用一句话说明start()启动进度条初始进度为 1%平滑动画起步set(30)直接设置百分比一次跳到 30%数字带滚动动画increase(10)增量推进在当前位置上 10%autoIncrease(5, 300)自动递增每 300ms 自动 5%适合耗时任务end()优雅结束先补足到 100%再淡出移除kill()立即移除任务失败时直接干掉不留尾巴 实战组合拳上传任务启动时autoIncrease收到服务端真实进度时改用set成功走end()、出错走kill()——四种状态全部覆盖。⚠️ 小提醒autoIncrease的定时器由内部统一管理调用end()或kill()时会自动清除不会内存泄漏。⚙️ 进度条主题定制6 种内置风格 覆盖层模式进度条外观由theme选项控制默认是 iOS 风格细线条的blue见 默认配置。主题样式文件 内置了 6 套风格主题名效果blue经典蓝色细线默认blueOverlay蓝色半透明覆盖层遮住整个元素blueOverlayRadius覆盖层 圆角blueOverlayRadiusHalfOpacity圆角覆盖层 半透明遮罩blueOverlayRadiusWithPercentBar覆盖层 大号百分比数字blackRadiusInputs黑色圆角条适合输入框类组件切换主题只需在启动前配置并可搭配overlayMode让进度条以覆盖层形式铺满目标元素progressJs(#uploadBox) .setOption(theme, blueOverlayRadiusHalfOpacity) .setOption(overlayMode, true) .start();想要自己的品牌色往样式文件里照葫芦画瓢加一段.progressjs-theme-你的主题名规则即可无需改 JS 一行代码。 进度回调事件用 onprogress 捕捉每一次变化Progress.js 提供三个钩子全部在 原型方法区 定义onbeforestart(回调)进度条创建前触发适合记录任务开始onprogress(元素, 百分比)每次进度变化都会回调且携带当前元素引用——多元素场景下判断谁到 50% 了靠它onbeforeend(回调)结束前触发。配合considerTransition选项默认开启它会等 CSS 过渡动画真正结束再执行回调var bar progressJs(#uploadBox); bar.onprogress(function (el, percent) { if (percent 80) statusText.textContent 即将完成…; }); bar.onbeforeend(function () { statusText.textContent 上传成功; }); bar.start();✅ 新手避坑清单元素必须先存在选择器匹配不到元素时会直接抛出There is no element with given selector错误请在元素渲染完成后再调用进度有上下限起步 1%上限自动封顶 100%见 溢出保护不用手动 clamp重复 start 会被忽略元素已有data-progressjs标记时不会重复创建进度条天然防抖生产环境用压缩版本地开发跑完后把引用换成minified目录下的文件修改源码后记得构建仓库提供了 Makefile执行make build即可重新压缩静态资源需先npm install 总结Progress.js 把给任意页面元素挂独立进度条这件常见却琐碎的需求压缩成了start/set/increase/autoIncrease/end/kill六个动词再加 6 套内置主题和 3 个回调钩子。体积小、无依赖、链式 API 好记是前端项目里控制多元素进度的一个优雅解法。完整用法参见项目说明 README.md。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考