Components

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.

Progress Indicators
  • Usage
  • Examples
  • Related component
  • 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 page. WIth non-linear navigation, users are not forced to finish a page 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

Related component

Download

If you download any document, you accept our Terms and Conditions.

Sketch UI Library
ZIP
85.97 MB