Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Progress bar - Activity

use: best-practice Web
A progress bar provides status as the system is taking an action on behalf of the user.

Examples

View va-progress-bar in Storybook

Usage

When to use an activity progress bar

  • System status feedback: When you need to provide feedback to the user that an action they initiated is progressing. The most common example is when a user must upload a file and needs feedback that the upload is progressing.
  • When the action is determinate: When the progress accomplished thus far and the remaining progress to be taken can be shown. This component takes a percentage as input to display the progress of the activity.

When to consider something else

  • Step indicator for forms: When you are providing feedback on the number of steps in a process, for example when a user is filling out a form, use the segmented progress bar.
  • Unknown or indeterminate time: When the wait time for a process, such as loading a page, is unknown use the loading indicator.

Behavior

  • The activity progress bar should fill until the activity is complete.
  • The activity progress bar should not return or retreat once it progresses. In other words, progress should never go backwards.

Placement

  • The activity progress bar should be placed near or, or proximate, to the interface element that trigger the activity (e.g. a file upload button)

Design principles

The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description enableAnalytics enable-analytics boolean false

Whether or not an analytics event will be fired.

 label label string

The text label for the progress bar.

 noPercentScreenReader no-percent-screen-reader boolean false

Whether to render screen reader updates for percent prop changes; set to true to handle externally.

 percent percent number

Percent of progress made. 0 to 100.

Events

Name Description component-library-analytics The event used to track usage of the component. This is emitted when percent is 0 or 100 and enableAnalytics is true.

Provide feedback

Share your feedback, report issues, or suggest improvements for the Progress bar - Activity component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Sep 10, 2025