A Progress component is used to indicate how far through a journey a user is and how many steps they have left to complete.
A progress component consists of a step count (eg. Step 1 of 3), an optional 'Info' heading statement, a stepped horizontal bar and track indicating the progress made and the step a user is on, and an optional 'Next' comment to predict the next step. It also has a 'Completed' status.
The progress component can be manipulated in the DOM without the need to reload the component. This dynamic behaviour enhances the user experience and facilitates the following experiences:
- Updating after user input
- Using in combination with other components such as previous and next cta's
- Skipping steps
- Going back to previous steps
- Automatically proceeding to the next step by itself until completed
- Create "rest" steps that automatically proceed after checking details, generating quotes, etc
|A||Step Count||This text informs you of the current step you are on and how many steps there are in total.|
|B||Info||This is a heading statement about this particular step. It is optional.|
|C||Bar||This represents the current step and those that have been already been completed. They overlay the track.|
|D||Track||This represents each step there is in in the process in total. Up to 20 steps are permitted.|
|E||Next||A statement of what the following step will be. It is optional.|
|F||Completed||The status shown on completion of the journey.|
|💚 Do's||💔 Don'ts|
|Use to indicate progress of journey||Use to show anything else such as loading|
|Info and Next parts should show a statement describing the step||Use questions on Info and Next - keep it informative|
|Keep Info and Next statements concise or omit if unnecessary or duplicating content||Omit one step but not the rest for Info - instead use an 'all or nothing approach'|
|Keep steps to a minimum for perceived simplicity||Nest as sub-process|
|Use up to 20 steps but ideally not more than 10||Use less than 2 steps|
|Use decimal places to reduce the number of overall steps||Use more than 1 on a page|
|Use the completed state on the confirmation page|
Internet Explorer 11 and Microsoft Edge 18 and lower do not show the progress bar.
The ns-progress component can be used in the following components:
|The maximum number of steps to show|
|The step to show as active (can also accept a decimal value)|
|Information about the current step|
|Information about the next step|
|Use to show the completed state|
- Do you have insights or concerns to share? You can raise an issue via Github bugs.
- See all the issues already raised via Github issues.
💩 🎉 🦄 If you have any questions, contact us on Microsoft Teams in the Nucleus Design System channels.