Recipe Progress Indicators
Visual feedback patterns for multi-step recipe execution in Meridian.
Linear Stepper
A horizontal sequence of numbered steps. Completed steps fill with violet, the active step pulses pink, and pending steps remain muted. Ideal for recipes with a fixed, known order.
Radial Fill
A circular SVG arc that fills from 0° to 360° as the recipe progresses. The stroke uses the violet-to-pink gradient. Best for single-action recipes where percentage completion matters.
Checklist Rows
Each sub-step renders as a row with a status icon. Completed rows show a violet checkmark, the active row highlights with a pink left border, and pending rows are dimmed. Best for recipes with parallel or optional branches.
Compact Dot Trail
A minimal row of dots for space-constrained UIs. Completed dots are solid violet, the active dot pulses pink, and future dots are hollow. Hovering a dot reveals the step label in a tooltip.