Step indicator

Four-step checkout rail: done checkmarks, current ring, muted upcoming labels.

Cart
Shipping
3Payment
4Review

Widely Supported

uino-js

Quick implementation

.si-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}
.si-steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 1rem;
  height: 3px;
  background: var(--card-border);
}
.si-step--active .si-bubble {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px oklch(0.55 0.18 250 / 0.25);
}

Prompt this to your LLM

Use ordered list for semantics.

Create a step indicator.

Classes: .step-indicator-demo, .step-indicator-card, ol.si-steps, li.si-step with modifiers --done and --active.
aria-current="step" on active item. Bubble shows checkmark or number.

Return HTML + CSS.

Why this matters in 2026

Multi-step flows still dominate checkout; explicit progress reduces abandonment when payment is slow.

The logic

A single background track behind bubbles keeps alignment cheaper than per-segment connectors.

Accessibility & performance

Ordered list communicates sequence; pair with step titles in the page heading for context.