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.
Timeline Tape
Stage labels ride above a single continuous track; the filled portion equals percent complete (5 / 8 = 62.5%). A vertical orange marker pins the current stage, topped by a callout bubble naming it. Analog-clock energy — quiet, measured, honest. Shown full-width and as a compact inline reading.
Pros
Percent-complete fill and per-stage labels coexist; the callout removes any doubt about "where are we now."
Cons
Callout bubble needs vertical headroom; labels still crowd on very narrow screens.
Best for
Project overview headers where a single measured line should carry the whole story.
Stage Cards
Each stage is its own small rectangular card in a scrollable row — no connecting line, the cards speak for themselves. Done cards fill dark ink with a check, the current card flares orange and lifts on a shadow, upcoming cards stay cream and muted. Built for horizontal scroll on mobile.
Pros
Every stage stays named and self-contained; the lifted orange card is impossible to miss; scroll handles overflow gracefully.
Cons
Wider than a bar; the current card can scroll out of view unless auto-centered.
Best for
Mobile and card-based layouts where each stage deserves its own tap target.
Inline Fraction + Expandable
Ultra-minimal: a single line — 5 / 8 · In production ▾ — with the fraction set in Fragment Mono. Click to drop a slim list of all stages: done are struck-through and muted, the current stage is orange and bold, upcoming read plain. Collapses back to one line. The densest option in the set.
Pros
Occupies barely one line; the fraction gives instant orientation; the full journey is one click away without leaving the row.
Cons
Least visual of the set; relies entirely on text, so no at-a-glance progress shape when collapsed.
Best for
The densest tables and inline references where every pixel of height counts.