实现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%; } } -
解释:
-
.progress-bar-container定义了进度条的容器。overflow: hidden确保进度条不会超出容器。 -
.progress-bar定义了实际的进度条。width: 0是初始状态。 -
animation: progress 5s linear forwards;指定了动画名称为progress，持续时间为5秒，速度曲线为线性（匀速），播放模式为forwards（动画结束后保持最后一帧的状态）。 -
@keyframes progress定义了动画的关键帧。从0%到100%，宽度从0%变为100%。
-
如何让进度条动画更平滑？
触发式加载精美特效企业网站源码使用jquery实现了很多精美的触发式加载特效，网站首页在随着访客的滚动条滚动过程中会出现很多触发式加载的特殊效果，让这个网站的风格瞬间显得非常的高大上，让你的企业品牌在访客心中留下更深的影响。当然，我们在使用jquery特效的同时也要注意程序对搜索引擎的友好型，所以这一点儿作者也有考虑到，已经尽可能的对js和css脚本进行精简和优化，尽可能的加快网站加载速度，同时也
动画的平滑程度很大程度上取决于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属性来实时更新进度文本。
