实现进度动画的核心方法是使用html的
实现进度动画，最常见的方法之一就是使用 HTML 的
1. 基本结构：用
HTML 提供了
- value：当前进度值
- max：最大进度值（默认是1）
<progress value="0" max="100"></progress>
这是一个最基础的进度条。浏览器会自动渲染成一个带有填充区域的条形图，但默认样式比较单调，想要好看的动画就得靠 CSS。
立即学习“前端免费学习笔记（深入）”；
2. 美化进度条：用 CSS 修改外观
不同浏览器对
以 Chrome 浏览器为例，需要用到伪元素：
progress { appearance: none; width: 100%; height: 20px; background-color: #ddd; border-radius: 10px; overflow: hidden; } progress::-webkit-progress-bar { background-color: #ddd; border-radius: 10px; } progress::-webkit-progress-value { background-color: #4caf50; border-radius: 10px; transition: width 0.5s ease; }
这段代码做了几件事：
- 移除了默认样式（appearance）
- 设置了进度条整体宽度、高度和圆角
- 定义了“已完成”部分的颜色，并加了一个宽度变化的过渡动画
这样就可以让进度条在数值变化时有一个渐变的效果了。
3. 动态更新：用 JavaScript 控制进度
要让进度条动起来，还得用 JS 动态修改 value 属性。比如模拟一个从 0 到 100 的加载过程：
<progress id="myProgress" value="0" max="100"></progress> <script> const progress = document.getElementById('myProgress'); let currentValue = 0; const interval = setInterval(() => { if (currentValue >= 100) { clearInterval(interval); } else { currentValue += 1; progress.value = currentValue; } }, 30); // 每30毫秒更新一次 </script>
这个例子中，我们每 30 毫秒增加一次进度值，直到达到 100。因为前面已经给 CSS 加了 transition，所以每次变化都会有一个平滑的过渡动画。
4. 更丰富的动画：CSS 关键帧 + JS 控制
如果只是简单的宽度变化不够炫，还可以用 CSS 动画来增强视觉效果。比如做一个渐变色流动的动画：
@keyframes flow { 0% { background-position: 0 0; } 100% { background-position: 100px 0; } } progress::-webkit-progress-value { background-image: linear-gradient(90deg, #4caf50 25%, #81c784 25%, #81c784 50%, #4caf50 50%); background-size: 100px 100%; animation: flow 1s linear infinite; }
这样就能实现类似“流动”的动画效果，适用于加载状态提示等场景。
不过要注意，这种动画不会随着进度变化而停止，而是持续播放。如果你希望只在加载过程中出现，可以用 JS 动态添加或移除类名来控制动画开关。
基本上就这些。用
评论（已关闭）
评论已关闭