progress标签无法实现无限滚动动画，需用div+CSS动画模拟；推荐线性渐变背景+translateX伪元素方案，兼顾兼容性与无障碍。
progress 标签本身不支持无限滚动动画
直接用 <progress> 无法实现“从左往右无限滚动”的视觉效果——它只是个语义化控件，渲染为固定轨道+填充块，value 只能控制填充比例（0–100），没有位移、循环或动画能力。想做出滚动等待效果，本质得绕过 <progress> 的默认行为，用 CSS 动画模拟。
用 div + CSS animation 替代 progress 实现滚动条效果
最可靠的做法是放弃 <progress>，改用 <div> 搭配线性背景动画。常见错误是试图给 <progress> 加 background-image 或 animation，但浏览器对它的样式限制极多（比如 Chrome 不允许修改 ::-webkit-progress-bar 的 background-position 动画）。
- 用两个并排的相同宽度条纹背景图（或线性渐变），水平重复，动画向左平移
50%宽度后重置，形成无缝循环 - 容器设
overflow: hidden，避免动画起始/结束处闪动 - 动画时长建议 2s–3s，太快易眩晕，太慢失去“等待感”
.loading-bar {
height: 4px;
background: linear-gradient(90deg, #007bff 0%, #007bff 25%, transparent 25%, transparent 50%);
background-size: 200% 100%;
animation: scroll 2s linear infinite;
}
@keyframes scroll {
0% { background-position: 0 0; }
100% { background-position: -100% 0; }
}
如果必须保留 progress 语义，可用 aria-hidden + 视觉替换
无障碍要求高时，可保留 <progress value="0" max="100"> 作为语义占位，但用 aria-hidden="true" 隐藏其视觉渲染，再在其外层包裹一个纯 CSS 实现的滚动条。否则屏幕阅读器会读出“0 percent”，与实际动画意图矛盾。
- 不能只靠
display: none或visibility: hidden，否则语义丢失 - 用
position: absolute+clip-path或transform: scale(0)隐藏原生控件，同时保持 DOM 存在 - 确保父容器有明确高度，否则 CSS 条纹可能塌陷
移动端 Safari 兼容性要注意 background-position 动画
iOS 15.4 之前，Safari 对 background-position 在 @keyframes 中的动画支持不稳定，可能出现卡顿或跳帧。实测更稳妥的方式是用 transform: translateX() 驱动一个伪元素：
立即学习“前端免费学习笔记（深入）”；
.loading-bar::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 200%; height: 100%;
background: linear-gradient(90deg, #007bff, #007bff 25%, transparent 25%, transparent);
animation: slide 2s linear infinite;
}
@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
这个写法在 iOS 和 Android WebView 上一致性更好，也更容易控制速度和方向。
