BreezyBit
Book a Demo
Start Free Trial

Segmented Progress Bar

Multi-Page Indicator

Shows form progress clearly across a 5-page flow.

For Use In: BreezyBit HTML Content element

Step 1

STARTFINISH

Step 2

STARTFINISH

Step 3

STARTFINISH

Step 4

STARTFINISH

Step 5

STARTFINISH
  • Use Step 1 snippet on the first form page, then increase highlighted bars each step.
  • Keep this bar at the top of every page to reduce drop-off in multi-step flows.
  • Color tokens: active `#e4a13a`, inactive `#d8d8d8`.

Milestone Check Rail

Callout Progress Bar

Segmented horizontal progress bar with an in-line check and status callout.

For Use In: BreezyBit HTML Content element

Step 1

✓

Step 2

✓✓

Step 3

✓✓✓

Step 4

✓✓✓✓

Step 5

✓✓✓✓✓
  • Use one snippet per page so the bar advances by one segment each step.
  • Progress advances one segment per page without text labels.
  • Colors: success `#5ec06d`, base `#c9d0d8`.

Dot Step Progress

Dot Sequence Indicator

Simple row of circular step markers that fill progressively from left to right.

For Use In: BreezyBit HTML Content element

Step 1

Step 2

Step 3

Step 4

Step 5

  • Use one snippet per page so one additional dot fills on each step.
  • This version is fixed to 5 steps.
  • Colors: active dot `#eb4f82`, inactive fill `#ffffff`, border `#eb4f82`.

Line Step Progress

Connected Stepper

Shows steps connected on a single horizontal line with active progress fill.

For Use In: BreezyBit HTML Content element

Step 1

Overall satisfactionPricingContacts
123

Step 2

Overall satisfactionPricingContacts
123

Step 3

Overall satisfactionPricingContacts
123
  • Use one snippet per page so the active step and line fill advance progressively.
  • Keep short step labels to avoid wrapping on mobile.
  • Colors: active `#23b89e`, inactive line/dot `#c9cfd3`.

Circular Step Progress

Radial Progress Indicator

Shows a circular quarter-by-quarter progress state with step heading and subtitle.

For Use In: BreezyBit HTML Content element

Step 1

1 of 4
Step 1

Step 2

2 of 4
Step 2

Step 3

3 of 4
Step 3

Step 4

4 of 4
Step 4
  • Use one snippet per page so the ring advances by 25% each step.
  • Center text follows `N of 4` format for clarity.
  • Colors: active ring/text `#e84f82`, remaining ring `#e9edf2`.