用CSS动画轻松实现进度条效果

网页加载时那个慢慢推进的横条，下载文件时显示完成度的小细线，其实很多都是用CSS动画做的。别以为这功能得多难，掌握几个关键点，自己也能快速写出一个好看的进度条。

基本结构：HTML搭个架子

先写一个简单的容器，代表进度条的整体和内部填充部分：

<div class="progress-container">
  <div class="progress-bar"></div>
</div>

外层 container 控制总长度和边框样式，内层 bar 是真正动起来的部分。

样式设定：CSS让条形显现

给外层加个灰色背景和圆角，看起来更顺眼：

.progress-container {
  width: 100%;
  max-width: 400px;
  height: 20px;
  background-color: #e0e0e0;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px auto;
}

.progress-bar {
  height: 100%;
  width: 0;
  background-color: #4caf50;
  border-radius: 10px;
}

这里把进度条初始宽度设为0，是为了后续用动画或JS控制它“长出来”。

加入动画：让进度动起来

直接用 @keyframes 定义一个从0%到100%的宽度变化：

@keyframes fill-progress {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

.progress-bar {
  height: 100%;
  width: 0;
  background-color: #4caf50;
  border-radius: 10px;
  animation: fill-progress 3s ease-in-out forwards;
}

animation 的 forwards 保证动画结束后停在100%，不会缩回去。3秒完成加载，符合大多数场景下的视觉节奏。

灵活控制：不同进度对应不同状态

如果不想一次性跑满，而是根据实际数据动态展示，可以去掉动画，改用JavaScript设置宽度：

// 假设已完成65%
document.querySelector('.progress-bar').style.width = '65%';

这时候CSS里就不需要 animation，只保留过渡效果让变化更平滑：

.progress-bar {
  transition: width 0.3s ease;
}

用户看到的进度就不会突兀跳变，而是缓缓推进，体验更自然。

美化一下：加点色彩和阴影

想让进度条更抢眼？加个渐变色和微光效果：

.progress-bar {
  background: linear-gradient(90deg, #66bb6a, #43a047);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

颜色从左到右过渡，配上阴影，看起来更有层次感，像某些主流App里的下载条。

这种纯CSS实现的进度条轻量、高效，不依赖图片或复杂脚本，适合用在网页加载提示、表单填写引导、资源上传等场景。下次做页面时，不妨试试自己动手写一个。”}