Segmented Progress Bars
beta

Use a segmented progress bar to show progression across a user flow, like the sign up process. Steps should only be filled from left to right, without skipped steps. If the process has over 10 steps, only show the labels for the active step to avoid crowding.

Account Selection
Personal Information
Verify Identity
Investment Profile
Account Setup
Account Selection
Personal Information
Verify Identity
Investment Profile
Account Setup

If a user leaves a step before completing all necessary actions, use the .active-half state to show the partially created step.

Personal Information
Personal Information

If you need to indicate partially filled segments either less than half, or greater than half, the active segment can be paired with the .active-partial class, alongside the .active-partial-NUM, where NUM is any number 0 through 100. This number represents the percentage the segment will be filled.

Tell us about you
Review recommendations
Open your account
Tell us about you
Review recommendations
Open your account