实现html进度条动画需先创建结构再用css控制动画。1. html结构使用外层容器和内层进度条两个div；2. css设置初始宽度为0并定义animation属性；3. 通过@keyframes规则设定从0%到100%的宽度变化；4. 修改animation-timing-function如ease-in-out提升平滑度；5. 在keyframes中添加background-color实现颜色渐变；6. 添加span元素并结合JavaScript更新加载文本，使用animationend事件提示完成状态。
实现HTML中的进度条动画CSS加载效果，核心在于利用CSS的animation属性，配合keyframes规则，动态改变进度条的宽度或颜色，营造加载的视觉效果。关键在于设计好动画的起始和结束状态，以及动画的循环方式。
解决方案：
-
HTML结构: 创建一个包含两个div元素的容器。外层div作为进度条的背景，内层div作为实际的进度条。
立即学习“前端免费学习笔记（深入）”；
<div class="progress-bar-container"> <div class="progress-bar"></div> </div>
-
CSS样式:
- 设置容器的样式，例如宽度、高度、背景颜色等。
- 设置进度条的初始样式，宽度为0，背景颜色为所需的加载颜色。
- 使用animation属性为进度条添加动画效果。
- 定义keyframes规则，控制进度条宽度的变化。
.progress-bar-container { width: 300px; height: 20px; background-color: #eee; border-radius: 5px; overflow: hidden; /* 隐藏超出容器的部分 */ } .progress-bar { width: 0; height: 100%; background-color: #4CAF50; border-radius: 5px; animation: progress 5s linear forwards; /* 动画名称，持续时间，速度曲线，播放模式 */ } @keyframes progress { 0% { width: 0%; } 100% { width: 100%; } } -
解释:
如何让进度条动画更平滑？
动画的平滑程度很大程度上取决于animation-timing-function属性。linear虽然简单，但可能显得过于机械。可以尝试以下选项：
- ease: 默认值，开始和结束时速度较慢，中间加速。
- ease-in: 开始时速度较慢。
- ease-out: 结束时速度较慢。
- ease-in-out: 开始和结束时速度较慢。
- cubic-bezier(n,n,n,n): 自定义贝塞尔曲线，可以更精细地控制动画的速度变化。
例如，将.progress-bar的animation属性修改为：
.progress-bar { /* ...其他样式 */ animation: progress 5s ease-in-out forwards; }
如何动态改变进度条的颜色？
除了改变宽度，还可以通过改变颜色来增强视觉效果。这可以通过在keyframes中添加background-color属性来实现。
@keyframes progress { 0% { width: 0%; background-color: #4CAF50; } 50% { background-color: #2196F3; /* 中间颜色 */ } 100% { width: 100%; background-color: #f44336; /* 结束颜色 */ } }
在这个例子中，进度条的颜色从绿色(#4CAF50)变为蓝色(#2196F3)，最后变为红色(#f44336)。
如何添加加载文本？
可以在进度条上方或下方添加一个span元素，用于显示加载文本。然后，使用JavaScript动态更新文本内容。
<div class="progress-bar-container"> <div class="progress-bar"></div> <span id="progress-text">Loading... 0%</span> </div> <script> const progressBar = document.querySelector('.progress-bar'); const progressText = document.getElementById('progress-text'); progressBar.addEventListener('animationiteration', () => { // 注意：animationiteration事件在动画每次循环结束时触发，这里不适用 // 获取当前进度 const currentWidth = progressBar.offsetWidth; const containerWidth = document.querySelector('.progress-bar-container').offsetWidth; const percentage = Math.round((currentWidth / containerWidth) * 100); progressText.textContent = `Loading... ${percentage}%`; }); progressBar.addEventListener('animationend', () => { progressText.textContent = 'Loading Complete!'; }); </script>
需要注意的是，animationiteration事件在动画 每次循环结束 时触发。由于我们使用了forwards，动画只播放一次，因此animationiteration事件不会被触发。更合适的做法是使用animationend事件来更新完成状态。此外，在动画过程中动态更新文本需要更复杂的逻辑，例如使用requestAnimationFrame。上面的示例仅展示了动画结束时的文本更新。一个更完整的实现可能需要JavaScript定时器或者监听动画的currentTime属性来实时更新进度文本。
