HTML中如何实现纯CSS的进度条动画-html教程-PHP中文网

最可靠纯CSS进度条用linear-gradient配合background-position动画实现，通过background-size:200%和calc(--progress*1%-100%)动态控制填充位置，兼顾性能与兼容性。

html中如何实现纯css的进度条动画

用 `linear-gradient` 模拟进度填充动画最可靠

纯 CSS 进度条动画不依赖 JS，核心是让“已加载”部分看起来在增长。直接操作 width 动画会有重排开销，且无法实现渐变色填充；而用 linear-gradient 配合 background-position 或 mask 控制可见区域，性能更好、兼容性也够用（Chrome 26+/Firefox 16+/Safari 6.1+）。

推荐做法：固定背景图尺寸，通过移动背景位置暴露不同宽度的色块，再用 animation 驱动 background-position 变化。示例：

.progress-bar {
  height: 8px;
  background-color: #e0e0e0;
  background-image: linear-gradient(90deg, #4caf50 0%, #4caf50 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: 100% 0;
  animation: fill 2s ease-out forwards;
}
<p>@keyframes fill {
to { background-position: 0 0; }
}</p>

background-size: 200% 100% 让渐变图铺满两倍宽度，初始时只显示右半（即 0% 进度）
background-position: 100% 0 起始位置靠右，to 移到 0 0 即左对齐，视觉上绿色从左向右“长出来”
动画结束停在 forwards，避免回弹；若需动态控制进度，改用 CSS 自定义属性 + calc() 更灵活

用 CSS 自定义属性动态控制进度值

硬编码动画只能做固定进度，实际项目常需 JS 注入数值（比如上传进度）。这时不要改 width，而是把进度映射到 background-position 的计算值上：

.progress-bar {
  --progress: 0;
  background-position: calc(var(--progress) * 1% - 100%) 0;
}

这样 JS 只需更新 element.style.setProperty('--progress', 65)，CSS 就自动算出对应位置。注意两点：

必须设 background-size: 200% 100% 才能保证 0–100% 映射到 -100% → 0 的位移范围
Safari 对 calc() 在 background-position 中的支持较晚（iOS 15.4+），旧版需降级为 JS 控制 width + overflow: hidden

IE11 兼容方案：用 `clip-path` + `width` 回退

IE11 不支持 background-position 动画和 clip-path 的 inset()，但支持 width 动画和简单 clip。可这样写：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

.progress-bar::before {
  content: '';
  display: block;
  height: 100%;
  width: 0%;
  background: #4caf50;
  animation: fill-width 2s ease-out forwards;
}
<p>@keyframes fill-width {
to { width: 100%; }
}</p>

关键点：