Skip to content

Progress

<ns-progress>

Overview

To indicate to a user how far through a journey they are and how many steps they have left to complete.

Examples

Guidance

Standard

Labelled diagram of ns-progress

Key

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.

Implementation

Placement

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

Specification

Attributes

steps

Property
steps
Description
The number of steps in the progress.
Type
number

complete

Property
complete
Description
Whether the progress is complete.
Type
boolean

current

Property
current
Description
The step the progress is currently on.
Type
number

next

Property
next
Description
The next step of the progress.
Type
string

info

Property
info
Description
The information about the current step.
Type
string

type

Property
type
Type
string
Default
standard

Last updated: