Components

Loading indicator

Use: Deployed

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

Use the Standard progress bar for file uploads where the wait time is determinate.
Use the Segmented progress bar in forms to communicate the number of steps required to complete the form.

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.