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 SelectionPersonal InformationVerify IdentityInvestment ProfileAccount Setup
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 youReview recommendationsOpen your account