步骤指示器 Step Indicator

步骤指示器通过圆点和连接线展示进度，当前步骤带脉冲动画。

实时预览

✓

提交

✓

审核

处理

完成

代码

css

.step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.15);
}
.step.done .step-dot { background: #40b883; border-color: #40b883; }
.step.active .step-dot {
  background: #40b883; border-color: #40b883;
  animation: step-pulse 1.5s ease infinite;
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(64,184,131,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(64,184,131,0); }
}

html

<div class="step done"><div class="step-dot">✓</div><span>步骤一</span></div>
<div class="step-line done"></div>
<div class="step active"><div class="step-dot">2</div><span>步骤二</span></div>
<div class="step-line"></div>
<div class="step"><div class="step-dot">3</div><span>步骤三</span></div>

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

快速使用

复制 CSS 代码到你的样式文件中
将进度条 HTML 结构粘贴到页面
用 JavaScript 动态设置进度值：element.style.setProperty('--progress', '75%')
或直接修改进度条 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	❌ 动画和自定义属性不支持

使用说明

属性	说明
`.done` / `.active` / 默认	三种状态: 已完成、当前、未到
`box-shadow` 脉冲	当前步骤的呼吸灯效果
`step-line`	步骤间的连接线
`background-size: 200%`	连接线填充动画技巧

步骤指示器 Step Indicator ​

实时预览 ​

代码 ​

快速使用 ​

使用场景 ​

常见问题 ​

浏览器兼容性 ​

使用说明 ​

📎 相关动画推荐