css3提供了丰富的样式和动画属性，开发者可以借助这些特性实现不同样式的进度条，不需要额外引入JavaScript库就能完成基础的进度展示功能。下面介绍几种常用的实现方法。
一、使用transition实现可控进度条
transition属性可以让元素的样式变化产生平滑的过渡效果，适合需要手动控制进度变化的场景，比如点击按钮触发进度增长。
首先定义进度条的容器和进度填充元素，容器设置固定宽度和边框，填充元素初始宽度为0，设置transition属性监听宽度变化。
<div class="progress-container"> <div class="progress-bar" id="progressBar"></div> </div> <button onclick="changeProgress()">增加进度</button>
对应的css3样式代码如下：
.progress-container {
width: 300px;
height: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
}
.progress-bar {
width: 0;
height: 100%;
background-color: #409eff;
/* 设置宽度变化的过渡效果，时长0.3秒，匀速变化 */
transition: width 0.3s linear;
}
JavaScript部分用来控制进度宽度的变化，这里仅做简单演示：
let progress = 0;
function changeProgress() {
progress += 10;
if (progress > 100) progress = 0;
document.getElementById("progressBar").style.width = progress + "%";
}
二、使用animation实现自动加载进度条
animation属性可以定义关键帧动画，适合需要自动展示加载过程的场景，比如页面初始化时的加载进度展示。
通过@keyframes定义进度从0到100%的宽度变化关键帧，然后给进度元素绑定这个动画即可。
<div class="progress-container"> <div class="auto-progress-bar"></div> </div>
对应的css3样式代码如下：
.progress-container {
width: 300px;
height: 20px;
border: 1px solid #ccc;
border-radius: 10px;
overflow: hidden;
margin-top: 20px;
}
/* 定义关键帧动画，从宽度0到宽度100% */
@keyframes progressAnimation {
from {
width: 0;
}
to {
width: 100%;
}
}
.auto-progress-bar {
width: 0;
height: 100%;
background-color: #67c23a;
/* 绑定动画，时长2秒，匀速，无限循环 */
animation: progressAnimation 2s linear infinite;
}
三、使用linear_gradient实现渐变进度条
linear_gradient线性渐变属性可以让进度条呈现渐变色效果，提升视觉美观度，可以和前面的transition或animation属性结合使用。
只需要修改进度元素的background-image属性为线性渐变即可，其他结构和逻辑和前面的方法一致。
.gradient-progress-bar {
width: 0;
height: 100%;
/* 定义从左到右的蓝绿渐变 */
background-image: linear-gradient(to right, #409eff, #67c23a);
transition: width 0.3s linear;
border-radius: 10px;
}
四、不同实现方法的适用场景对比
可以根据实际需求选择合适的实现方式，以下是几种方法的特性对比：
| 实现方法 | 核心属性 | 适用场景 |
|---|---|---|
| transition过渡 | transition | 需要手动控制进度变化的场景，比如用户操作触发进度更新 |
| animation动画 | @keyframes、animation | 自动加载、循环展示进度的场景，比如页面加载动画 |
| linear_gradient渐变 | linear-gradient | 需要提升进度条视觉效果的通用场景，可搭配前两种方法使用 |
注意事项
- 进度条容器需要设置
overflow: hidden，避免进度元素超出容器范围破坏样式 - 如果进度条需要圆角效果，建议给进度元素也设置对应的border-radius，避免直角超出容器圆角
- 使用animation实现循环动画时，注意设置合理的动画时长，避免动画速度过快或过慢影响用户体验
css3进度条animationtransitionlinear_gradient修改时间：2026-07-04 16:36:27