Back to Dictionary
Onboarding & Tours
●○○Ready to Use
Use sparingly

Step Indicator Motion

Use Step Indicator Motion for fixed multi-step flows; use Progress Bar when the process is continuous instead of discrete.

Use

Showing progress through a known sequence where completion reduces user uncertainty.

Avoid

Avoid it for exploratory navigation or long workflows where exact step count changes.

Safer Alternative

Progress Bar

Risk Level

High attention

Timing

200-450ms per transition; line fill and dot activation should feel like one movement.

Easing

Use ease-out for progress fill and a light spring for the active dot.

Risk

feels slowaccessibility sensitive

Live Demo

1
2
3

Setup

Invite your team

What It Is

A horizontal or vertical stepper where the active dot, connecting line, and label animate as users move through a multi-step flow.

Decision Guidance

Use Step Indicator Motion for fixed multi-step flows; use Progress Bar when the process is continuous instead of discrete.

Best For

Showing progress through a known sequence where completion reduces user uncertainty.

Avoid When

Avoid it for exploratory navigation or long workflows where exact step count changes.

Timing

200-450ms per transition; line fill and dot activation should feel like one movement.

Easing

Use ease-out for progress fill and a light spring for the active dot.

Risk Tags

feels slowaccessibility sensitive

Alternatives

Progress BarProgressive Checklist FillActive Pill Slide

✓When to Use

  • Checkout flows
  • Account setup or onboarding sequences
  • Multi-step forms where progress affects user confidence

✕When NOT to Use

  • Single-page forms with no real sequence
  • Flows where users can jump freely between many sections
  • Tiny mobile headers where the indicator competes with navigation

Configuration Tips

  • 01Animate completed line length before changing the next label emphasis
  • 02Use numbers or icons only if the sequence has stable steps
  • 03Keep the active step visible above the fold on mobile

You've Seen It In

Shopify CheckoutTypeformAirbnb

AI Implementation Prompts

Move from a fast scaffold to production details, then tune timing and edge states.

Create a three-step checkout indicator. When the user advances, animate the connecting line to the next circle, then highlight the new active step and label.

Code Example (Tailwind CSS)

A focused implementation sketch you can adapt to your product state.

export function StepIndicator({ activeStep }: { activeStep: number }) {
  return (
    <ol className="relative flex justify-between">
      <div className="absolute left-6 right-6 top-6 h-1 bg-stone-200" />
      <div className="absolute left-6 top-6 h-1 bg-amber-400 transition-all" style={{ width: activeStep > 1 ? '50%' : '0%' }} />
      {[1, 2, 3].map((step) => (
        <li key={step} aria-current={activeStep === step ? 'step' : undefined} className="relative z-10">
          <span className="flex h-12 w-12 items-center justify-center rounded-full border bg-white">{step}</span>
        </li>
      ))}
    </ol>
  );
}

Related Effects

Progress Bar

A horizontal bar that fills from left to right, showing the percentage of a task that's complete. Gives users a sense of how much longer they need to wait.

Progressive Checklist Fill

As a user completes onboarding tasks, list items animate a strikethrough, a checkmark draws itself, and the entire item fades into a completed state, often filling a master progress bar.

Active Pill Slide

A rounded active background that glides from one segmented option or filter chip to another, making the selected state feel continuous instead of abruptly changing.