水平进度条是前端页面中展示进度状态的常见组件，通过纯CSS实现可以灵活控制样式，适配不同的设计需求。下面介绍几种常见的CSS水平进度条实现方式。
基础水平进度条实现
最基础的进度条由外层容器和内层进度填充两部分组成，外层设置总宽度和背景，内层通过宽度控制进度比例。
<div class="progress-container"> <div class="progress-bar" style="width: 60%;"></div> </div>
对应的CSS样式如下：
/* 外层容器样式 */
.progress-container {
width: 100%;
height: 20px;
background-color: #f0f0f0;
border-radius: 10px;
overflow: hidden;
}
/* 内层进度条样式 */
.progress-bar {
height: 100%;
background-color: #409eff;
transition: width 0.3s ease;
}
这里外层容器设置overflow: hidden是为了让内层进度条的圆角效果更自然，transition属性可以让宽度变化时有平滑的过渡效果。
带渐变和文字的水平进度条
很多场景下需要在进度条上显示当前进度百分比，同时给进度条添加渐变效果提升视觉体验。
<div class="progress-container">
<div class="progress-bar" style="width: 75%;">
<span class="progress-text">75%</span>
</div>
</div>
对应的CSS样式：
.progress-container {
width: 100%;
height: 24px;
background-color: #e9e9e9;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, #67c23a, #409eff);
display: flex;
align-items: center;
justify-content: center;
transition: width 0.3s ease;
}
.progress-text {
color: #fff;
font-size: 12px;
font-weight: bold;
}
这里使用linear-gradient实现从左到右的渐变效果，文字通过flex布局居中显示在进度条内部，当进度条宽度较小时文字会自动被外层容器遮挡，避免溢出问题。
动态加载的水平进度条
如果需要模拟加载过程的动态效果，可以通过CSS动画实现进度条自动增长的效果。
<div class="progress-container"> <div class="progress-bar loading"></div> </div>
对应的CSS样式：
.progress-container {
width: 100%;
height: 20px;
background-color: #f5f5f5;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
height: 100%;
background-color: #f56c6c;
}
/* 加载动画 */
.loading {
animation: progress-loading 2s ease-in-out infinite;
}
@keyframes progress-loading {
0% {
width: 0%;
}
50% {
width: 70%;
}
100% {
width: 100%;
}
}
这个动画会让进度条在2秒内从0增长到100%，并且无限循环，适合用于页面加载、文件上传等场景的等待状态展示。
不同场景的样式适配
可以根据不同的业务场景调整进度条的样式，比如警告状态的进度条可以用橙色，错误状态用红色，成功状态用绿色。
/* 成功状态进度条 */
.progress-success .progress-bar {
background-color: #67c23a;
}
/* 警告状态进度条 */
.progress-warning .progress-bar {
background-color: #e6a23c;
}
/* 错误状态进度条 */
.progress-error .progress-bar {
background-color: #f56c6c;
}
使用时只需要在外层容器添加对应的类名即可切换不同状态的进度条样式，提升组件的复用性。
注意事项
- 进度条的宽度建议通过内联样式或者动态绑定的方式设置，方便根据实际进度值调整
- 如果进度条需要适配移动端，外层容器可以设置最大宽度，避免在小屏幕上过宽
- 进度条的高度和圆角数值可以根据设计需求调整，保持整体风格统一
- 如果进度条内部有文字，需要注意文字颜色和背景的对比度，保证可读性