Design and Implementation
The progress bar should be used for in-app experiences. You can restrict the user from jumping around the progress bar or allow them to go to previous and future steps without completing the current one. For example, Use a <div>
element with “indi-progress-bar__label”
class instead of a link to restrict the user from clicking on a step.
The steps(items) in progress bar is implemented using list items in an unordered list.
A step in progress bar can have four possible states, complete, incomplete, current and untouched.Untouched is the default style for <li>
. Create other states by adding corresponding modifier classes:
“indi-progressbar__item-is--complete”
“indi-progressbar__item-is--incomplete”
“indi-progressbar__item-is--current”
When a user clicks on any other step, you should add “indi-progressbar_item-is-current”
modifier class to that step using javascript. This will show the green circle indicating to the user which step they’re on.