Progress Indicators
Progress indicators can be used to visualize the current status of any step in a multi-step process, such as online orders or a setup process.
-
Usage
-
Examples
-
Related components
-
Download
Usage
In general, you can place progress indicators either above or below the individual step in the process.
Progress status
A number of progress status labels are available to indicate the status of an individual step: disabled, not yet completed, completed, currently active and in progress.
Linear vs. non-linear navigation
Linear navigation limits the user’s page navigation by only allowing them to go through the pages one at a time – users may only progress once finished with the current step. With non-linear navigation, users are not forced to finish a step before moving on.
Linear progress indicator with connecting bar.
Vertical linear progress indicator with connecting bar.
Vertical linear progress indicator without connecting bar.
Non-linear progress indicator with connecting bar and labels on top.
Non-linear progress indicator without connecting bar.
Inline progress
One type of progress indicator uses an inline progress circle whenever it’s necessary to show the user’s progress on a single page. It displays the current progress status on that specific page. You can also apply linear and non-linear navigation in this case.
Linear progress indicator without connecting bar and with inline progress circle.
Examples
