如何使用CSS制作一个进度条从左往右填充的加载动画？-css教程-PHP中文网

用width+transition实现进度条动画需设子元素width从0%到100%、display:block、overflow:hidden；高性能方案用transform:scalex()配合transform-origin:left，避免重排卡顿。

如何使用css制作一个进度条从左往右填充的加载动画？

用 `width` + `transition` 实现基础填充动画

最直接的方式是控制一个子元素的 width 从 0% 到 100%，配合 transition 实现平滑变化。父容器设为固定高度和背景色，子元素用 background-color 填充，overflow: hidden 防止溢出。

关键点在于：必须给子元素设置 display: block（默认 inline 时 width 不生效），且过渡属性要写在子元素上，而不是父容器。

.progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background-color: #4caf50;
  width: 0%;
  transition: width 0.3s ease;
  display: block;
}

然后通过 JS 修改 progress-fill 的 style.width，或切换 class 触发动画。

用 `@keyframes` + `transform` 替代 `width` 更高性能

频繁修改 width 会触发重排（layout），尤其在低端设备或复杂页面中可能卡顿。改用 transform: scaleX() 只影响合成层，浏览器能走 GPU 加速。

注意：scaleX() 是相对于元素自身宽度缩放，所以需把子元素初始宽度设为 100%，再用 transform 缩放到目标比例。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

初始状态： transform: scaleX(0)
完成状态： transform: scaleX(1)
动画必须加 transform-origin: left，否则会从中心缩放

@keyframes fill-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.progress-fill {
  width: 100%;
  transform-origin: left;
  animation: fill-progress 2s ease forwards;
}