React 中应通过 props（如 height、color、backgroundColor）而非 CSS 覆盖自定义 react-progressbar.js 样式；Vue 中用 el-progress 的 format 函数控制文字位置与样式；原生 JS 导出需节流进度更新并平滑插值；动画务必用 transform/opacit。

React 中用 react-progressbar.js 自定义进度条颜色和高度

默认样式太浅、太细，导出时用户根本注意不到进度变化。改样式不是靠覆盖 css 类名硬顶，而是用组件原生支持的 props 控制。

它接受 completed（当前值）、maxCompleted（最大值）、height、color、backgroundColor 等关键参数，全部可动态传入：

• height 建议设为 "6px" 或 "8px"，低于 4px 在高分屏上会糊成一条线
• color 别直接写 "#007bff"，用 CSS 变量如 "var(--primary)" 更方便主题切换
• 如果用了暗色模式，backgroundColor 必须显式设为浅灰（如 "#e0e0e0"），否则在深背景上直接消失
• 动画靠的是组件内部的 transition，不要自己加 will-change 或 transform，会触发重绘抖动

Vue 项目里用 el-progress 调整圆角和文字位置

Element Plus 的 el-progress 默认文字贴在右侧，导出场景下用户更关心“还剩多久”，得把百分比挪到中间、加粗、放大。

它不支持直接 slot 插入自定义文字，但可以用 format 函数接管显示逻辑：

• 传入 :format="() => ''" 清空默认文字，再用绝对定位把 <span></span> 盖在进度条上方
• stroke-width 控制粗细，但设成 12 以上时，border-radius 必须同步加大，否则两端变尖角
• 圆角最大别超 stroke-width / 2，否则 Safari 会渲染异常（表现为进度条末尾突兀截断）
• 动画是 CSS 实现的，修改 transition 时只动 width 和 background-color，别碰 opacity，否则 Chrome 下会闪

原生 JS 导出流程中避免 requestAnimationFrame 进度跳变

手写进度更新时，常有人在 XMLHttpRequest.upload.onprogress 里直接算百分比并调 requestAnimationFrame 更新 UI，结果进度条卡在 95% 不动，最后突然蹦到 100%。

根本原因是：上传事件触发频率低，尤其大文件 + 弱网；而 requestAnimationFrame 每帧都跑，没数据就重复渲染旧值。

• 必须加节流：用 setTimeout + 标志位控制每 200ms 最多更新一次 UI
• 百分比计算别只用 event.loaded / event.total，要结合后端返回的预估耗时做平滑插值（比如当前 40%，但后端说预计还要 8 秒，就按每秒 +5% 插值）
• 别在 onload 才设成 100%，应在 onprogress 接近 98% 时就提前设为 100%，掩盖网络延迟导致的视觉停顿

CSS 动画卡顿？优先用 transform 和 opacity

导出进度条动画一旦卡，用户第一反应是“卡死了”，其实只是渲染层掉帧。查 Performance 面板会发现主线程被 layout 占满。

所有进度条动画，只要涉及宽度变化，就必须避开 width、left、top 这类触发布局的属性：

• 用 transform: scaleX() 替代 width，配合 transform-origin: left
• 进度完成态的“打勾”动画，别用 display: block 切换，用 opacity + transform: scale()
• 确保进度条容器有 will-change: transform，但只在开始导出时加，结束立即移除，不然长期占用 GPU 内存
• 如果用了 filter: blur() 做发光效果，导出期间必须关掉——它会让动画帧率直接腰斩

进度条不是装饰，是用户对系统状态的唯一信任锚点。样式改得再炫，卡半秒，信任就掉一截。动效细节容易被忽略，但恰恰是导出体验最真实的落点。