步骤进度

连接线朝下一步填充，完成的圆点会弹成一个对勾，让流程走到哪一步一目了然。

CSS
布局
点击
收录于 2026-10-29

购物车
地址
支付
完成

AI 提示词

用 React 和 CSS 制作多步骤进度指示器。把步骤圆点排成一行，后面是轨道线，上面叠一条主色填充线，其 transform 为 scaleX(当前步骤 / (步骤数 − 1))，transform-origin 为 left，过渡 420ms，缓动 cubic-bezier(0.16, 1, 0.3, 1)。每个圆点通过 data 属性有三种状态：已完成（主色填充，并用 stroke-dashoffset 画出对勾）、当前（主色圆环加柔和的脉冲光晕）、未开始（弱化色圆环）。圆点变为已完成时播放一个 300ms 的弹跳（scale 1 → 1.2 → 1），并延迟到填充线到达时才落下。“上一步”和“下一步”按钮切换步骤，到两端时禁用。当前项设置 aria-current="step"。在 prefers-reduced-motion 下切换状态时不做填充过渡和弹跳。步骤为购物车、地址、支付、完成。

源代码

Demo.tsx

'use client'

import { useState } from 'react'
import s from './demo.module.css'

export default function StepProgress({ labels }: { labels: Record<string, string> }) {
  const steps = labels.steps.split('|')
  const [current, setCurrent] = useState(1)

  return (
    <div className={s.wrap}>
      <ol className={s.steps} style={{ '--fill': current / (steps.length - 1) } as React.CSSProperties}>
        {steps.map((t, i) => (
          <li
            key={t}
            className={s.step}
            data-state={i < current ? 'done' : i === current ? 'current' : 'upcoming'}
            aria-current={i === current ? 'step' : undefined}
          >
            <span className={s.dot}>
              <svg viewBox="0 0 24 24" aria-hidden="true">
                <path d="M6 12.5l4 4 8-9" />
              </svg>
            </span>
            <span className={s.name}>{t}</span>
          </li>
        ))}
      </ol>
      <div className={s.actions}>
        <button type="button" className={s.btn} disabled={current === 0} onClick={() => setCurrent((c) => c - 1)}>
          {labels.back}
        </button>
        <button type="button" className={s.btn} disabled={current === steps.length - 1} onClick={() => setCurrent((c) => c + 1)}>
          {labels.next}
        </button>
      </div>
    </div>
  )
}

demo.module.css

.wrap {
  display: grid;
  justify-items: center;
  gap: 28px;
  width: min(320px, 100%);
}

.steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps::before,
.steps::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  top: 11px;
  height: 2px;
  background: var(--stage-rule);
}

.steps::after {
  background: var(--stage-accent);
  transform: scaleX(var(--fill));
  transform-origin: left;
  transition: transform 420ms var(--ease-out);
}

.step {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 24px;
}

.dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid var(--stage-rule);
  border-radius: 50%;
  background: var(--stage-bg);
  transition: border-color 200ms, background-color 200ms;
}

.dot svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: var(--stage-accent-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
}

.name {
  font: 500 var(--text-xs) / 1 var(--font-body);
  color: var(--stage-muted);
  white-space: nowrap;
}

.step[data-state='current'] .dot {
  border-color: var(--stage-accent);
  animation: halo 1.8s var(--ease-out) infinite;
}

.step[data-state='current'] .name,
.step[data-state='done'] .name { color: var(--stage-ink); }

.step[data-state='done'] .dot {
  border-color: var(--stage-accent);
  background: var(--stage-accent);
  animation: pop 300ms var(--ease-out) 300ms;
}

.step[data-state='done'] .dot svg {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 260ms var(--ease-out) 320ms;
}

@keyframes pop { 50% { transform: scale(1.2); } }

@keyframes halo {
  from { box-shadow: 0 0 0 0 color-mix(in oklch, var(--stage-accent) 50%, transparent); }
  to { box-shadow: 0 0 0 10px transparent; }
}

.actions { display: flex; gap: 8px; }

.btn {
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--stage-rule);
  border-radius: var(--radius-sm);
  background: var(--stage-surface);
  color: var(--stage-ink);
  font: 500 var(--text-sm) / 1 var(--font-body);
  cursor: pointer;
}

.btn:disabled { color: var(--stage-rule); cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .steps::after, .step[data-state='done'] .dot svg { transition: none; }
  .step[data-state='done'] .dot, .step[data-state='current'] .dot { animation: none; }
}