纯CSS实现进度条推荐background-size+linear-gradient方案：分离渐变层与底色，用带单位的--progress变量控制宽度，transition作用于background-size；原生progress需重置样式并兼顾浏览器前缀；斜切进度条靠角度与透明色标实现；动画型加载条宜用background-position循环。
纯 CSS 实现进度条完全可行，且性能优于 JS 驱动 width 变化——关键在于用 background-size 或 linear-gradient 配合 CSS 变量控制视觉填充，避免重排。
用 background-size + linear-gradient 做可控进度条
这是目前最推荐的方案：分离渐变层与底色，仅靠 background-size 控制宽度，配合 transition 实现平滑动画。
常见错误现象：直接在 linear-gradient 字符串里拼接 calc(var(--progress))，导致每次更新都触发样式重计算，卡顿明显。
- 正确写法是把渐变设为独立背景层：
background: linear-gradient(to right, #4cd964, #4cd964) left / var(--progress) 100% no-repeat, #f0f0f0; -
--progress必须是带单位的值（如65%），不能只写数字 - 必须显式声明
background-repeat: no-repeat，否则渐变会平铺干扰效果 - 过渡要写在
background-size上，不是--progress变量本身（部分旧浏览器不支持变量过渡）
用 progress HTML 元素 + CSS 覆盖默认样式
原生 <progress></progress> 语义清晰、可访问性好，但各浏览器默认样式差异大，需重置。
立即学习“前端免费学习笔记（深入）”；
使用场景：表单上传、文件处理等需要无障碍支持的流程。
- 先清除默认外观：
progress { -webkit-appearance: none; appearance: none; } - 用
::-webkit-progress-bar和::-webkit-progress-value分别控制底色和进度色（Chrome/Safari） - Firefox 需用
::progress-bar和::progress-value（注意前缀兼容性） - IE 不支持
<progress></progress>，若需兼容，得降级为div+ ARIA 属性
斜切/角度类进度条靠 linear-gradient 的角度参数
所谓“斜切”，本质是用 linear-gradient 的方向角 + 透明色标制造视觉切割线，不是 transform 倾斜容器。
容易踩的坑：角度值理解反了——-60deg 是从左下往右上拉渐变，不是“向左切”；实际效果取决于透明色标的位置和元素高度。
- 斜边角度由
linear-gradient(120deg, transparent 5px, #4f73e6 0)中的120deg决定 - 斜边粗细由透明色标的像素值（如
5px）控制，该值应 ≈ 进度条高度的一半 - 左右两段需用不同角度（如
-60deg和120deg）才能对齐成连续斜边 - 圆角（
border-radius）必须加在子容器上，不能加在父容器，否则斜切被裁掉
动画型加载条（不确定进度）慎用 @keyframes
无限循环的加载动画（如顶部细条、骨架屏）适合用 @keyframes 驱动 background-position，但要注意渲染路径。
性能影响：用 background-position 动画比 width 更高效，因为不触发 layout；但若渐变太宽（如 background-size: 200% 100%），内存占用会上升。
- 推荐写法：
background-size: 200% 100%; animation: shift 2s linear infinite;+@keyframes shift { from { background-position: 0 0; } to { background-position: -100% 0; } } - 避免在
animation中写background-size动画，iOS Safari 有闪烁 bug - 如果要暂停动画（比如请求完成时），用
animation-play-state: paused比移除 class 更可靠
真正难的不是画出进度条，而是让它的行为与业务状态严格同步——CSS 变量更新时机、JS 设置值的单位一致性、以及动画中断时的视觉残留，这些细节才是线上最容易出问题的地方。
