Skip to main content

Loading indicator

A loading indicator tells the user that the system is processing information, whether that is sending or receiving data. It provides reassurance to the user that the system is still working.

Examples​

Open in: Storybook | Figma

Usage​

Refer to the VA Design System for usage guidance

Code usage​

Open Storybook

Content considerations​

We follow a simple content pattern for loading indicators, which consists of the following elements in this order:

  1. A present participle verb of the action that is happening
  2. An object that is being acted upon
  3. An elipsis

Start each loading indicator with the present participle form (-ing) of the action that is happening. Consider what the system is actually doing. Remember that the loading indicator is supposed to inform the user what is happening while they’re waiting. The system isn’t always “loading” something. Sometimes its sending something. Other times its saving something.

Follow the verb with the object that is being acted upon. For example, if the system is saving something, describe (in 1 or 2 words) what is being saved. If applicable, make the object personal to the user by using a possive pronoun (your) instead of an article (a, the).

End each loading indicator with an ellipsis (3 periods). Do not use unnecessary words, such as please or wait.

Examples of loading indicators:

  • Saving your draft...
  • Loading your appointments...
  • Submitting your file...

Accessibility considerations​

  • Refer to the VA Design System for accessibility considerations
  • On the website, W3C WAI-ARIA aria-live="polite", aria-label and aria-valuetext are used to ensure screen reader users are also provided the same information. On the mobile app, use the equivalent accessibility hints and labels in React Native.