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>盖在进度条上方 -
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()做发光效果，导出期间必须关掉——它会让动画帧率直接腰斩
进度条不是装饰，是用户对系统状态的唯一信任锚点。样式改得再炫，卡半秒，信任就掉一截。动效细节容易被忽略，但恰恰是导出体验最真实的落点。
