CSS Animations

Appearance

百分比计数 Progress Percentage ​

圆形进度环配合百分比数字显示，使用 @property 实现数字递增动画。

实时预览 ​

82%

代码 ​

css
@property --num {
  syntax: '<integer>'; initial-value: 0; inherits: false;
}
.pct-circle {
  stroke: #40b883;
  stroke-dasharray: 314;    /* 2 * π * 50 */
  stroke-dashoffset: 314;
  animation: pct-draw 2s ease-out forwards;
}
@keyframes pct-draw {
  to { stroke-dashoffset: calc(314 - 314 * var(--pct) / 100); }
}
.pct-value {
  animation: pct-count 2s ease-out forwards;
  counter-reset: num var(--num);
}
@keyframes pct-count {
  from { --num: 0; }
  to { --num: var(--pct); }
}
html
<div class="pct-ring" style="--pct:82">
  <svg viewBox="0 0 120 120">
    <circle cx="60" cy="60" r="50" class="pct-circle" />
  </svg>
  <span class="pct-value"></span>
</div>

纯 CSS 实现的百分比计数进度动画——通过动画和自定义属性让进度指示器具有动态视觉效果。适用于文件上传、表单步骤、数据加载等场景。

快速使用 ​

  1. 复制 CSS 代码到你的样式文件中
  2. 将进度条 HTML 结构粘贴到页面
  3. 用 JavaScript 动态设置进度值：element.style.setProperty('--progress', '75%')
  4. 或直接修改进度条 fill 元素的 width 或 stroke-dashoffset

使用场景 ​

  • 文件上传进度：进度条从 0 到 100% 的填充动画+百分比数字递增
  • 多步骤表单：步骤指示器展示当前进度（第 2/4 步）
  • 页面加载：顶部加载条从 0 到 100%，让用户有明确的等待预期
  • 技能/数据可视化：环形进度或进度条展示统计数据的填充动画

常见问题 ​

Q: CSS 进度条如何动态更新？ A: 通过 JavaScript 修改 CSS 自定义属性：element.style.setProperty('--progress', '75%')，CSS 中用 width: var(--progress) 或 @property --num 配合动画实现。也可以直接修改内联 style 的 width 值。

Q: 环形进度如何实现？ A: 两种方案：1) SVG <circle> + stroke-dasharray + stroke-dashoffset 控制弧长；2) CSS conic-gradient + @property 动画（仅 Chrome/Edge）。SVG 方案兼容性更好。

Q: 骨架屏如何适配不同内容？ A: 骨架屏用抽象的灰色矩形块模拟内容区域，不需要和真实内容完全对齐。关键是用 CSS grid/flex 排布骨架块的结构，让用户对"即将出现的内容布局"有心理预期。

浏览器兼容性 ​

浏览器兼容性
Chrome / Edge✅ 完全支持（含 @property）
Firefox✅ 基本支持（不含 @property）
Safari✅ 基本支持
移动端浏览器✅ 完全支持
IE 11❌ 动画和自定义属性不支持

使用说明 ​

属性说明
@property --num注册自定义整数属性，支持动画插值
counter-reset + ::after用 CSS 计数器显示递增数字
--pct CSS 变量目标百分比值
calc(314 - 314 * var(--pct) / 100)动态计算 stroke-dashoffset

📎 相关动画推荐

以下更多 CSS 进度动画 等你探索——每个都支持在线预览和一键复制代码。

进度条填充环形进度点加载器渐变进度条骨架屏脉冲步骤指示器