Create up to 12 steps and customize each one with its own title, description, number, and uploaded icon. Control the complete visual system—including progress and base lines, icon backgrounds, active and idle states, strokes, shadows, colors, sizing, corner radius, typography, and spacing.
Choose between padded numbers, standard numbers, letters, or Roman numerals. Step numbers, titles, descriptions, and icons can all be shown or hidden independently.
Fine-tune the animation with Loop or Once playback, adjustable timing, pauses, and start delay. Choose Linear, Ease, or Spring motion to match the character of your design. Completed steps transition smoothly into a customizable check icon, while Canvas State lets you preview and style any stage directly in Framer.
StepProgress automatically switches from a horizontal desktop layout to a vertical mobile layout. Dedicated mobile spacing and text-offset controls provide precise alignment across different typefaces and content lengths.
Ideal for product journeys, order tracking, service processes, onboarding, roadmaps, and instructional sequences—without writing code.
Create up to 12 steps and customize each one with its own title, description, number, and uploaded icon. Control the complete visual system—including progress and base lines, icon backgrounds, active and idle states, strokes, shadows, colors, sizing, corner radius, typography, and spacing.
Choose between padded numbers, standard numbers, letters, or Roman numerals. Step numbers, titles, descriptions, and icons can all be shown or hidden independently.
Fine-tune the animation with Loop or Once playback, adjustable timing, pauses, and start delay. Choose Linear, Ease, or Spring motion to match the character of your design. Completed steps transition smoothly into a customizable check icon, while Canvas State lets you preview and style any stage directly in Framer.
StepProgress automatically switches from a horizontal desktop layout to a vertical mobile layout. Dedicated mobile spacing and text-offset controls provide precise alignment across different typefaces and content lengths.
Ideal for product journeys, order tracking, service processes, onboarding, roadmaps, and instructional sequences—without writing code.
