正确做法是分离渐变层与底色，仅通过--progress控制background-size实现平滑进度条；需设带单位值、匹配渐变方向、添加no-repeat，并用style.setProperty()动态更新，transition须作用于背景所在元素。
用 --progress 控制 background-size 实现平滑更新
直接改 background 字符串性能差、易出错，正确做法是把渐变层和底色分离，只动 background-size。关键在于：渐变层宽度随变量变化，底色固定铺满。
-
--progress必须设为带单位的值（如42%），不能只写数字，否则background-size: var(--progress) 100%会失效 - 渐变方向必须与进度方向一致：水平进度用
to right，垂直进度用to bottom - 别漏掉
no-repeat，否则渐变会平铺，视觉上变成多个条 - 示例：
.progress-bar { --progress: 0%; height: 8px; background: linear-gradient(to right, #2196F3, #2196F3) left / var(--progress) 100% no-repeat, #f5f5f5; transition: background-size 0.3s ease-out; }
JS 更新 style.setProperty() 而不是 innerHTML 或 classList
想让进度条响应真实加载，就得靠 JS 动态写入变量值。用 style.setProperty() 是最直接、最可控的方式，避免预设 class 的硬编码限制。
- 别用
element.className = 'progress-75'，它无法表示 75.3% 这种非整数进度 - 别用
el.innerHTML插入 style 标签——重复操作 DOM 开销大，且容易覆盖已有样式 - 注意除零保护：当
total === 0时，设--progress为'0%'，而不是 NaN 或空字符串 - React/Vue 中优先绑定内联 style：
:style="{ '--progress': progress + '%' }"，比 useEffect 反复调用 setProperty 更轻量
transition 不写在父容器上，只作用于子元素或伪元素
很多人把 transition: background-size 写在进度条容器上，结果动画不生效——因为真正变化的是它的背景，而 transition 必须施加在“拥有该背景”的元素本身。
- 如果用伪元素实现进度层（推荐），transition 要写在
::after上，不是父容器 - 如果用子
<span></span>，transition 必须写在该<span></span>上，父容器只负责overflow: hidden - 别混用
width和background-size过渡：二者触发的渲染流程不同，同时设置可能互相干扰 - 移动端务必加
will-change: background-size（仅动画期间），否则 iOS Safari 容易掉帧
兼容性陷阱：IE 不支持 CSS 变量，linear-gradient 在旧 Android WebView 中降级
纯 CSS 变量方案在 IE 完全不可用，而部分老安卓 WebView 对 linear-gradient 解析异常，表现为背景全黑或空白。
立即学习“前端免费学习笔记（深入）”；
- 需要兼容 IE？放弃变量，改用 JS 操作
style.background字符串拼接（虽然不优雅但可靠） - Android 4.4 以下 WebView 中，
to right会被忽略，必须显式写角度90deg - 别依赖
cubic-bezier(0.34, ...)曲线——老系统会 fallback 到linear，导致体验断层 - 真机调试时，Safari 有时会缓存旧的 background-position 计算结果，加
transform: translateZ(0)强制重绘可缓解
loaded / total 比例可能跳变，得加简单防抖或插值平滑处理。 
