Progress Bar Steps

About this block

Progress Bar Steps borrows the product onboarding meter for the marketing page. A segmented bar runs full, full, half, empty across four steps, mid journey by design, and the details beneath each segment carry a number, title, honest time estimate, and a sentence. The bar frozen at step three tells visitors where the real effort sits, almost nowhere.

The steps are one array with done, active, and todo states driving the fill. The time column is the conversion surface, ten minutes, runs itself, day one, week one is a complete onboarding pitch in eight words. Keep the active segment half filled, motion implied beats finished.

When to use

Reach for this block when onboarding effort is the objection and your honest answer is small. It compresses what milestone-path and day-one-timeline say into a single instrument reading, and pairs with with-setup-progress, the same meter motif doing CTA duty later on the page.

A natural flow around it on a Marketing Pro page:

Before

• Heroes making the promise this meter schedules

After

• Tour blocks showing the screens behind each segment
• CTAs for readers ready to start filling their own bar

What you can display

One strong use is SaaS onboarding with automation doing the middle steps. Other meters:

• Migration meter. Export, transfer, verify, switch with the vendor doing the middle two.
• Certification path. Course modules with study time estimates per segment.
• Implementation plan. A services rollout with weeks as the time column for enterprise buyers.

Tip: let the time labels do the selling, runs itself in the time column outperforms any amount of body copy.