推荐用 background-size 控制进度条宽度：以单色线性渐变作背景，通过 background-size 的横向百分比（如 37% 100%）精准控制填充长度，配合 transition 实现平滑生长动画，避免 width 或 transform 破坏布局与视觉。
用 background-size 控制进度条宽度，别碰 width
直接改按钮的 width 会破坏布局流，尤其在 flex 或 inline 场景下容易错位、换行或挤压文字。真正稳定的做法是只动背景图尺寸：用一个纯色条纹作为背景，靠 background-size 的横向百分比控制“已填充”长度，再配 background-position 锚定起点。
- 背景必须设为
background-image: linear-gradient(to right, #4a90e2, #4a90e2)（单色，避免渐变色在缩放时出现色块断裂） -
background-size设为<code>0% 100%→100% 100%，第一个值是宽度百分比，第二个是高度，不能颠倒 - 必须加
background-repeat: no-repeat，否则条纹会平铺，进度看起来跳变 - 文字颜色建议用
color: rgba(255,255,255,0.8)而非纯白，避免进度未满时文字被背景“吞掉”
用 transition 动画 background-size，不是 opacity 或 transform
很多人想用 opacity 淡入或 transform: scaleX() 拉伸，但前者没进度感，后者会拉伸整个按钮包括文字和边框，视觉失真。只有 background-size 的过渡能精准模拟“色块从左向右生长”的下载过程。
- 过渡必须写全：
transition: background-size 0.4s ease-in-out，漏掉ease-in-out会生硬 - 初始状态设
background-size: 0% 100%，完成时设100% 100%，中间用 JS 动态改内联样式或 class 切换 - 不要对
background-position做过渡——它不参与进度表达，固定为0 0即可 - 如果用 CSS 自定义属性（
--progress），记得在transition里写background-size，而不是--progress（CSS 变量本身不可过渡）
JS 更新进度时，避免反复 setAttribute 或 style.xx =，用 style.setProperty
直接赋值 el.style.backgroundSize = '37% 100%' 看似简单，但在 Safari 和旧版 Chrome 中，多次快速更新会导致动画卡顿或跳帧。用 setProperty 更稳妥，也方便配合 CSS 变量做统一控制。
- 推荐写法：
button.style.setProperty('background-size', `${percent}% 100%`) - 如果用了 CSS 变量，定义时要带单位：
button.style.setProperty('--progress', `${percent}`)，然后 CSS 里写background-size: calc(var(--progress) * 1%) 100% - 注意百分比值必须是数字，不要传字符串如
'37%'给setProperty，否则计算会出错 - 下载结束前别移除按钮的
pointer-events: none，否则用户可能重复点击触发多请求
IE11 兼容不了 background-size 百分比？用伪元素 fallback
IE11 支持 background-size，但不支持百分比值作用于渐变背景（会当 0 处理）。这时候不能硬扛，得降级：用 ::after 伪元素盖一层绝对定位的色块，靠 width 控制长度。
立即学习“前端免费学习笔记（深入）”；
- 主按钮设
position: relative，伪元素::after设content: ''、position: absolute、top: 0、left: 0、height: 100%、background: #4a90e2 - JS 更新时改伪元素的
width：button.style.setProperty('--width', `${percent}%`)，CSS 里用width: var(--width) - 务必加
z-index: 1到伪元素，并确保文字层z-index: 2，否则文字会被盖住 - 这个方案在现代浏览器也能跑，只是多一层 DOM，性能影响可忽略
实际最麻烦的不是写法，而是下载过程中网络波动导致进度回调不均——比如 0→60% 瞬间跳，然后卡住 3 秒不动。这时候光靠 CSS 动画撑不住，得在 JS 层加缓冲逻辑，比如用 requestAnimationFrame 平滑插值，或者监听 progress 事件而非仅靠定时器。
