Node Rail
Connected nodes on a horizontal line — the refined baseline of the current spine. Done nodes fill orange, the current node enlarges with a ring, upcoming nodes stay hollow. Calm, editorial, reads at a glance.
Pros
Familiar, quiet, scales from 8 to 9+ stages without redesign; label under every node keeps the whole journey legible.
Cons
Needs full width to breathe; labels get tight on mobile and long stage names wrap.
Best for
The dashboard hero and project overview pages — the default, safest choice.
Segmented Bar
One continuous bar split into equal segments — one per stage. Completed segments fill solid, the current segment half-fills with a slow pulse, upcoming stay light grey. Shown expanded (with labels) and inline (compact reading for lists).
Pros
Extremely compact; the same component reads at 170px wide or full-bleed. Segment count = stage count, so progress is honest.
Cons
Individual stage names disappear at small sizes; relies on the text caption to name the current stage.
Best for
Item rows, tables, and cards where vertical space is precious.
Chevron Pipeline
Arrow steps pointing right — a breadcrumb of progress. Done stages fill dark ink with a small check, the current stage flares accent orange, upcoming stay muted. Reads like a production pipeline on a shop floor.
Pros
Strong directional momentum; every stage is named at all times; done/current/upcoming contrast is unmistakable.
Cons
Visually loud next to quiet content; 9 chevrons get cramped below ~900px and need horizontal scroll.
Best for
Internal / PM production views where the pipeline metaphor earns its weight.
Numbered Stepper
Numbered circles joined by a line — done steps flip to an orange check, the current number is ringed in accent, upcoming stay grey. Shown horizontal for wide screens and vertical for narrow panels and mobile.
Pros
Numbers give instant "5 of 9" orientation; the vertical variant carries dates and detail, perfect for drill-in panels.
Cons
Heavier than the rail; two variants to maintain; check-vs-number mix needs consistent rules.
Best for
Item detail pages and mobile — the vertical form is the strongest narrow-screen answer here.
Compact Progress + Callout
A slim rectangular track with a position marker and a text callout — "Stage 5 of 8 · In production". Click Details to expand the full stage list. The space-saving option for dense views; also shown embedded in an item row.
Pros
Smallest footprint of all five; progressive disclosure keeps dense tables clean while the full journey stays one click away.
Cons
Stage names hidden by default; the marker alone can't communicate which stage without the caption.
Best for
Dense item lists, order tables, and dashboard summaries with many rows.