实现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%。
-
如何让进度条动画更平滑？
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
动画的平滑程度很大程度上取决于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属性来实时更新进度文本。
