Skip to main content

ns-progress

Introduction#

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

Content guidance#

Progress - In progress and completed states

KeyField typeGuidelines
AStep CountThis text informs you of the current step you are on and how many steps there are in total.
BInfoThis is a heading statement about this particular step. It is optional.
CBarThis represents the current step and those that have been already been completed. They overlay the track.
DTrackThis represents each step there is in in the process in total. Up to 20 steps are permitted.
ENextA statement of what the following step will be. It is optional.
FCompletedThe status shown on completion of the journey.

Best practice#

๐Ÿ’š Do's๐Ÿ’” Don'ts
Use to indicate progress of journeyUse to show anything else such as loading
Info and Next parts should show a statement describing the stepUse questions on Info and Next - keep it informative
Keep Info and Next statements concise or omit if unnecessary or duplicating contentOmit one step but not the rest for Info - instead use an 'all or nothing approach'
Keep steps to a minimum for perceived simplicityNest as sub-process
Use up to 20 steps but ideally not more than 10Use less than 2 steps
Use decimal places to reduce the number of overall stepsUse more than 1 on a page
Use JavaScript to dynamically update the component rather than re-add on each pageUse the last step as the confirmation page
Use the completed state on the confirmation page

Browser support#

Internet Explorer 11 and Microsoft Edge 18 and lower do not show the progress bar.

Usage#

View example on Storybook

Component placement#

The ns-progress component can be used in the following components:

Specification#

AttributeTypeDefaultOptionsDescription
stepsnumberThe maximum number of steps to show
currentnumber1The step to show as active (can also accept a decimal value)
infostringInformation about the current step
nextstringInformation about the next step
completebooleanfalseUse to show the completed state

Design Tokens

You can change the branded look and feel of the ns-progress by modifying these options in the design tokens.

Read more about design tokens in our getting started guide.

{
  "background-color": "#FFFFFF",
  "todo-color": "#C8C9C7",
  "progress-indicator-color": "#0099FF",
  "complete-color": "#23D160",
  "info": {
    "step-typography": "p-normal-bold",
    "description-typography": "p-normal-regular"
  },
  "next": {
    "label-typography": "p-caption-bold",
    "description-typography": "p-caption"
  }
}

Feedback#

  • 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.

๐Ÿ’ฉ ๐ŸŽ‰ ๐Ÿฆ„ You can also contact the team on Slack on the #product-nucleus channel!