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.


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.


Progress bar - Activity

Use: Deployed
A progress bar provides status as the system is taking an action on behalf of the user.


View va-progress-bar in Storybook


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.


  • 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.


  • 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

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.
percent percent number Percent of progress made. 0 to 100.


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.
Edit this page in GitHub (Permissions required)
Last updated: Feb 07, 2024