Progress Indicator

A progress indicator shows the user where they are along the steps of a journey.


Progress indicator shows a user’s progress through a set of steps, guiding toward the completion of a specified process.

When to Use

Use progress indicators to keep the user on track when completing a specific task. By dividing the end goal into smaller, sub-tasks, it increases the percentage of completeness as each task is completed.



Accordion anatomy diagram
  1. Total step count
  2. Current step title
  3. Step indicator
  4. Upcoming step



The progress indicator can display three distinct states for each step within a process:

  1. Completed: This state indicates that the user has successfully completed a step. It is used to provide positive feedback and a sense of accomplishment, encouraging continued progress through the remaining steps.

  2. In Progress: The In Progress state signals the current step where the user is actively engaged. This state is crucial for indicating the present focus area within the process, guiding users on where to direct their attention.

  3. Upcoming: The Upcoming state is used for steps that the user has not yet reached. It sets expectations for what is next and helps users anticipate the actions required in future steps.
Accordion anatomy diagram