Indigo Design System v1.2.0

Progress Bar

A progress bar shows a user how far along they are in a process.

Overview

Users benefit from seeing the end-to-end process they need to complete. A progress bar gives that visual clue along with helpful grouping of help users track their progress through a linear process, showing them what they’ve completed and how far they have to go. It also acts as navigation.

Design and Implementation

The progress bar should be used for in-app experiences. You can restrict the user from jumping around the progress bar or allow them to go to previous and future steps without completing the current one. For example, Use a <div> element with “indi-progress-bar__label” class instead of a link to restrict the user from clicking on a step.

The steps(items) in progress bar is implemented using list items in an unordered list.

A step in progress bar can have four possible states, complete, incomplete, current and untouched.Untouched is the default style for <li>. Create other states by adding corresponding modifier classes:

  • “indi-progressbar__item-is--complete”
  • “indi-progressbar__item-is--incomplete”
  • “indi-progressbar__item-is--current”

When a user clicks on any other step, you should add “indi-progressbar_item-is-current” modifier class to that step using javascript. This will show the green circle indicating to the user which step they’re on.

<div class="indi-progress-bar">
    <ul class="indi-progress-bar__list">
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Consortium Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-incomplete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Consortium Leader Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Contact Information</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-complete">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">HCP Eligibility Category</span>
            </a>
        </li>
        <li class="indi-progress-bar__item indi-progress-bar__item--is-current">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Supporting Documentation</span>
            </a>
        </li>
        <li class="indi-progress-bar__item ">
            <a href="#" class="indi-progress-bar__label">
                <span class="indi-progress-bar__circle"></span>
                <span class="indi-progress-bar__text">Signature</span>
            </a>
        </li>
    </ul>
</div>

Use Guidelines

Use When

  • Taking a user through a multistep process.
  • Designing in-app processes such as filling out a form or making a payment.

Don’t Use When

  • There are two or fewer steps.
  • It’s not a cohesive process. Use navigation instead.

Editorial

  • Keep labels short and descriptive.
  • Generally use noun phrases.