最轻量纯CSS实现线性加载动画应优先使用background-image + linear-gradient配合background-position动画，兼容IE10+、无需JS/SVG/额外DOM，且仅触发composite层合成，避免layout/paint开销。
用 background-image + linear-gradient 模拟进度条动画最轻量
纯 CSS 实现线性加载动画，不依赖 JS 或 SVG，background-image 配合 linear-gradient 是最直接、兼容性好（IE10+）、且无需额外 DOM 元素的方式。核心思路是用渐变色块“覆盖”底色，再通过 background-position 或 background-size 控制其横向移动。
- 不要用
border或outline动画——难以精确控制长度和起止位置 - 避免嵌套伪元素做遮罩——增加 DOM 复杂度，且 IE 下
::before/::after动画有渲染延迟 - 推荐写法：
background-image: linear-gradient(to right, #4a90e2, #4a90e2);，然后用background-size设定渐变宽度（如20% 100%），再用animation移动background-position - 示例关键帧：
@keyframes loading { 0% { background-position: -100% 0; } 100% { background-position: 100% 0; } }
clip-path 动画在 Safari 中可能卡顿，慎用于生产环境
用 clip-path: inset(0 100% 0 0) 配合 transition 或 @keyframes 推进右侧裁剪边界，视觉上像进度条“生长”，但实际是显隐控制。问题在于 Safari 对 clip-path 的硬件加速支持不稳定，尤其在 iOS WebView 或旧版 Safari 中容易掉帧或跳变。
- Chrome 和 Firefox 表现良好，可放心用
- 若必须兼容 Safari，改用
transform: scaleX()+overflow: hidden更稳妥 -
clip-path的百分比值在不同容器尺寸下行为不一致，建议固定父容器宽高，避免响应式布局中错位 - 不要写
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%)做动态路径——性能远低于inset()，且无法 GPU 加速
用 width + transition 最易调试，但需注意重排开销
给一个子 <div> 设 width: 0%，再用 transition: width 0.3s ease-out 过渡到目标值，是最直白的实现。适合需要精确控制进度数值（比如从 30% 到 75%）的场景，但要注意潜在性能陷阱。
- 每次修改
width都会触发 layout（重排），高频更新（如每 50ms 更新一次）会导致卡顿 - 务必加
will-change: width或把进度条设为transform: translateZ(0)强制 GPU 层提升 - 不要用
%单位配合 flex 子项——flex 容器内width百分比计算逻辑复杂，容易出现意外缩放 - 如果只是模拟“正在加载”，而非真实进度反馈，建议用循环动画（如上面
background-position方案），避免反复写 JS 修改width
动画卡顿？先检查是否触发了 layout 或 paint
无论选哪种方案，只要动画掉帧，大概率是浏览器在每一帧都执行了 layout 或 paint。用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “Layout Shift Regions”，能快速定位问题源。
立即学习“前端免费学习笔记（深入）”；
-
background-position和transform是仅触发 composite 的属性，优先选它们 -
width、height、top/left（非 transform 位移）都会触发 layout - 渐变色太复杂（比如多层
linear-gradient叠加）会加重 paint 开销，单色渐变足够用 - 移动端务必加
transform: translateZ(0)或will-change: transform，否则 iOS WebKit 默认不启用 GPU 加速
background-image + background-position 就够了；只有需要 JS 同步控制具体百分比时，才上 width 方案——但得记得加 will-change。 Safari 兼容性差的团队，直接绕开 clip-path。 
