在CSS初级项目里，水平进度条是展示加载、任务完成度等场景的常用组件，结合animation和width属性可以快速实现动态过渡效果，不需要依赖JavaScript就能完成基础动画逻辑。
基础HTML结构搭建
首先我们需要搭建进度条的容器和进度填充层，外层容器用来控制整体宽度和样式，内层元素用来实现宽度变化的动画效果。
<div class="progress-container"> <div class="progress-bar"></div> </div>
基础样式设置
给进度条容器和进度条本身设置基础样式，容器需要定义固定宽度、高度和背景色，进度条初始宽度设为0，后续通过动画修改宽度值。
.progress-container {
/* 进度条容器宽度，可根据需求调整 */
width: 300px;
/* 容器高度 */
height: 20px;
/* 容器背景色，浅灰色作为底色 */
background-color: #f0f0f0;
/* 圆角效果，让边缘更柔和 */
border-radius: 10px;
/* 溢出隐藏，避免进度条超出容器 */
overflow: hidden;
}
.progress-bar {
/* 初始宽度为0，动画会从0开始变化 */
width: 0;
/* 进度条高度占满容器 */
height: 100%;
/* 进度条填充色，蓝色作为主色 */
background-color: #409eff;
/* 进度条自身也设置圆角，和容器匹配 */
border-radius: 10px;
}
结合animation与width实现动画
核心逻辑是通过@keyframes定义宽度从0到100%的关键帧，然后给进度条元素绑定这个动画，设置动画时长和循环方式。
/* 定义动画关键帧，宽度从0变化到100% */
@keyframes progress_animation {
from {
width: 0;
}
to {
width: 100%;
}
}
.progress-bar {
/* 继承之前的样式 */
width: 0;
height: 100%;
background-color: #409eff;
border-radius: 10px;
/* 绑定动画：动画名称 时长 速度曲线 延迟 循环次数 方向 */
animation: progress_animation 2s linear 0s 1 normal;
/* 动画结束后保持最终状态，避免回到初始宽度 */
animation-fill-mode: forwards;
}
进阶优化与场景适配
添加进度文字提示
可以在容器内添加文字层，展示当前进度百分比，通过伪元素或者额外标签实现，这里用额外标签更直观。
<div class="progress-container"> <div class="progress-bar"></div> <span class="progress-text">0%</span> </div>
.progress-container {
position: relative;
width: 300px;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #409eff;
border-radius: 10px;
animation: progress_animation 2s linear 0s 1 normal;
animation-fill-mode: forwards;
}
.progress-text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
color: #333;
/* 文字层在进度条上方 */
z-index: 1;
}
/* 动态修改文字的进度可以通过CSS变量配合JS实现，初级项目如果不需要动态更新文字可以暂时写死 */
调整动画速度曲线
默认的linear是匀速动画，我们可以换成ease-in-out让开始和结束的速度更慢，更符合真实加载的视觉效果。
.progress-bar {
width: 0;
height: 100%;
background-color: #409eff;
border-radius: 10px;
/* 使用ease-in-out速度曲线 */
animation: progress_animation 2s ease-in-out 0s 1 normal;
animation-fill-mode: forwards;
}
常见问题说明
- 如果动画结束后进度条回到初始宽度，需要检查是否设置了
animation-fill-mode: forwards，这个属性会让元素保持动画结束后的状态。 - 进度条容器的
overflow: hidden属性不能省略，否则进度条宽度超过容器时会出现溢出显示的问题。 - 动画时长可以根据实际需求调整，比如加载场景可以设置为3到5秒，任务完成场景可以设置为1到2秒。
这种纯CSS实现的水平进度条适合初级项目使用，不需要额外引入JavaScript逻辑，性能也更好，后期如果需要动态控制进度，可以结合少量JS修改进度条的width属性值即可。