步骤指示器

圆点 + 连线画出流程进度：已完成打勾，当前步高亮

全平台通用动效与背景内容区效果

实时预览（拖动参数，立刻看变化）

代码

<div class="steps">
  <div class="step"><div class="n done">✓</div><div class="cap">填写信息</div></div><div class="bar done"></div>
  <div class="step"><div class="n now">2</div><div class="cap">确认订单</div></div><div class="bar"></div>
  <div class="step"><div class="n">3</div><div class="cap">支付</div></div>
</div>
<style>
.steps { display: flex; align-items: flex-start; }
.step { text-align: center; width: 86px; }
.n { width: 34px; height: 34px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
     font-weight: 700; background: #E3E0D8; color: #8A8781; }
.n.done { background: #141414; color: #fff; }
.n.now { background: #fff; color: #141414; border: 2.5px solid #141414; }
.bar { flex: 1; height: 2.5px; background: #E3E0D8; margin-top: 16px; }
.bar.done { background: #141414; }
.cap { margin-top: 7px; font-size: 12.5px; color: #55534e; }
</style>

<div class="flex items-start"><div class="w-[86px] text-center"><div class="mx-auto grid h-[34px] w-[34px] place-items-center rounded-full bg-neutral-900 font-bold text-white">✓</div><div class="mt-[7px] text-xs text-neutral-500">填写信息</div></div><div class="mt-4 h-[2.5px] flex-1 bg-neutral-900"></div>…</div>

export function Steps({ steps, current }) {
  return (<div style={{ display: "flex", alignItems: "flex-start" }}>
    {steps.map((s, i) => (<React.Fragment key={i}>
      {i > 0 && <div style={{ flex: 1, height: 2.5, marginTop: 16, background: i <= current ? "#141414" : "#E3E0D8" }} />}
      <div style={{ textAlign: "center", width: 86 }}>
        <div style={{ width: 34, height: 34, margin: "0 auto", borderRadius: "50%", display: "grid", placeItems: "center", fontWeight: 700,
          background: i < current ? "#141414" : "#E3E0D8", color: i < current ? "#fff" : "#8A8781",
          ...(i === current ? { background: "#fff", color: "#141414", border: "2.5px solid #141414" } : {}) }}>{i < current ? "✓" : i + 1}</div>
        <div style={{ marginTop: 7, fontSize: 12.5, color: "#55534e" }}>{s}</div>
      </div></React.Fragment>))}
  </div>);
}

代码片段以 MIT 释出，可自由复制改用。

这个效果是怎么实现的

它是怎么工作的（中文）

结构是「圆点—连线—圆点」交替排列。三种状态必须一眼可分：完成（实心 + 对勾）、当前（描边高亮）、未到（灰）。连线跟随前一步的状态变色。步骤超过 5 个时，移动端建议改成「第 2 步 / 共 5 步 + 进度条」的紧凑形态。

How it works (English)

The structure alternates dot—line—dot. Three states must read at a glance: done (filled + check), current (outlined highlight), upcoming (gray). Connectors take the color of the step before them. Beyond ~5 steps, switch mobile to a compact 'Step 2 of 5 + progress bar' form.

参考与来源 Sources

本条为「批次 1（重建）」成果（2026-11-10 用户决定：原妞妞老师素材不导出，改由公开材料重建）：效果概念参考开源效果生态——Magic UI（MIT）、Uiverse（MIT）、Animista、Paper Shaders（Apache-2.0）、tsParticles（MIT）、CSS Loaders（MIT）等（见 /resources 对应条目，许可以各项目为准）；本站的实现代码、参数体系与全部文案均为 Aglaia 原创，未复制上述项目的代码或文案，也与妞妞老师原始素材无关。

配套提示词

步骤指示器 · 提示词待复验 · →