Progress Bars

A progress bar shows users their progress through a linear process, providing visual feedback on what they’ve completed and what remains.

Overview

Use progress bars for linear, multi-step processes. Progress bars can also serve as navigation through a form or process. For details on enabling and disabling movement between steps, see the Navigation section below.

Design and Layout

The steps in a progress bar are list items in an unordered list. Each step can be in one of four states: complete, incomplete, current, or untouched. Untouched is the default style for <li>. Use corresponding modifier classes to create other states:

  • "indi-progressbar__item-is--complete"
  • "indi-progressbar__item-is--incomplete"
  • "indi-progressbar__item-is--current"

To ensure steps change to the "current" styling when users click on them, add the modifier class "indi-progressbar_item-is-current" using javascript.

Users can use the progress bar and navigation buttons to move to previous and future steps. Depending on the form or process, you may need to restrict users from jumping ahead to an "untouched" step or navigating with the progress bar altogether.

To enable progress bar navigation, add links to each step using a <div> element. To disable navigation, use a ""indi-progress-bar__label"" class instead of a link. Set the allowNavigation prop to "false" to let users navigate to previous steps while preventing jumps to future "untouched" steps.

Placement and Alignment

In standard forms, place progress bars below the website header and above all page content, including text headings. Add adequate white space above and below progress bars to improve readability. Limit progress bars to a maximum of eight steps.

Progress bars should span the full viewport (like app headers) with steps spaced evenly across the content area.

Dos and Don'ts

Do
  • Do use short or single-word labels for each step. Page headings should match the corresponding steps.
  • Do include navigation buttons (e.g., "Back," "Save & Exit," and "Continue") at the bottom of each page. Users should also be able to use their browser’s back and forward buttons to navigate between steps.
Don't
  • Don't use progress bars if there are fewer than three steps.
  • Don’t use progress bars for processes that are unrelated or can be completed in any order (i.e., nonlinear).

Installation

Props

Events