Steps Indicator
Dots and connectors show flow progress: done gets a check, current gets the highlight
Live preview (drag the parameters, watch it change)
Code
<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>);
}Code snippets are MIT-licensed — copy and adapt freely.
How this effect works
它是怎么工作的（中文）
结构是「圆点—连线—圆点」交替排列。三种状态必须一眼可分：完成（实心 + 对勾）、当前（描边高亮）、未到（灰）。连线跟随前一步的状态变色。步骤超过 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 原创，未复制上述项目的代码或文案，也与 妞妞老师 原始素材无关。