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.

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

Sketch UI Library
ZIP
85.97 MB