进度条动画
进度条动画：页面顶部或上传时显示的进度条。纯 CSS 版用 width 或 scale 配合 transition/animation 从 0 走到 100%；配合斑马条纹动画显得“持续在推进”。
条纹用 repeating-linear-gradient 生成最省事；未知进度的“不确定态”可用无限平移的假进度块。
- 确定进度：transition width 或 animation 到具体百分比
- 斑马纹 repeating-linear-gradient + 平移 = 持续推进感
- 不确定态：小段色块无限平移，常见于页面顶部
HTML
<style> .prog { width: 80%; max-width: 420px; height: 18px; margin: 40px auto; border-radius: 9px; overflow: hidden; background: #eef2f7; } .prog .bar { height: 100%; width: 0; border-radius: 9px; background: repeating-linear-gradient(45deg, #4a9eff 0 12px, #6cb1ff 12px 24px); background-size: 24px 24px; animation: grow 4s ease forwards, stripe .8s linear infinite; } @keyframes grow { to { width: 78%; } } @keyframes stripe { to { background-position: 24px 0; } } </style> <div class="prog"><div class="bar"></div></div>
本节要点进度条 = 可变宽度 + repeating 渐变条纹 + 条纹平移动画。
