Skip to main content
U.S. flag

An official website of the United States government

Components

Loading indicator

Use: Best practice
A loading indicator provides a clue to ongoing activity when the site needs to load additional content.

Example

View va-loading-indicator in Storybook

Usage

When to use the Loading indicator

  • When the wait time for a process, such as loading a page, is unknown.

When to consider something else

Content considerations

  • Make sure that the loading indicator message is clear and concise.

Accessibility considerations

  • The loading indicator component is used to notify user’s that the page content is loading. W3C WAI-ARIA aria-live="polite", aria-label and aria-valuetext are used to ensure screen reader users are also provided the same information.

Code usage

Attributes and Properties

Property Attribute Type Default Description
enableAnalytics enable-analytics boolean false Analytics tracking function(s) will be called. Form components are disabled by default due to PII/PHI concerns.
label label string 'Loading' An aria label
message message string The message visible on screen when loading
setFocus set-focus boolean false Set to true if the loading indicator should capture focus

Events

Name Description
component-library-analytics The event used to track usage of the component.
Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024