Skip to main content

Official Website

of the Commonwealth of Pennsylvania

    The .gov means its official.

    Local, state, and federal government websites often end in .gov. Commonwealth of Pennsylvania government websites and email systems use "pennsylvania.gov" or "pa.gov" at the end of the address. Before sharing sensitive or personal information, make sure you're on an official state website. 
    Components

    Progress Indicator

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

    Overview

    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.

    Formatting

    Anatomy

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

    Behaviors

    States

    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