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
View va-loading-indicator in StorybookUsage
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-labelandaria-valuetextare 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. |