Loading Dots

Loading Dots make users aware that content is currently being loaded, processing, or that change will occur on the page.

yarn add @workday/canvas-kit-react
Install
yarn add @workday/canvas-kit-react

Anatomy

Image of a Loading Dots with annotation markers.

  1. Default Loading Dots: Ideal for use on white backgrounds
  2. With Circle Variation: For use on gray, dark, or image-based backgrounds.

Usage Guidance

  • Use Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).
  • Motion should be applied to the Loading Dots to reinforce that the content on the page is loading behind the scenes.
  • Avoid increasing the size of the Loading Dots to maintain consistency with other indicators accross the application.
  • Always center the Loading Dots and position it close to where you want the user's attention to be once loading is complete.
  • Use for specific elements on a page that are still loading while other content has already loaded.
  • If only a portion of the interface is displaying new content or being updated, place the Loading Dots in that specific part of the interface.
  • In immediate response to an executed action when there is excessive time before the expected results occur.
  • Ideally used on a white background.

When to Use

  • Use on page elements where the visual layout/format of the content being loaded is unknown.
  • Use to indicate processing, or that change will occur on the page (rather than loading UI elements).

When to Use Something Else

  • Consider using a Skeleton if the visual layout/format of the content being loaded is known ahead of time (preferred).

Examples

Basic Example

Right-to-Left (RTL)

Accessible Example

Props

Loading Dots does not have any documented props. Undocumented props are spread to its outermost element.

Accessibility Guidelines

  • Loading Dots should announce to users using a screen reader that a page or a portion of the page is currently being loaded.

Content Guidelines

  • Loading Dots typically should not appear long enough to require any content.
  • In rare use cases it may be helpful to support the Loading Dots with a brief statement describing specifically what is currently loading.
  • It's recommended to keep loading UI descriptions a short, single line sentence as the user may have very little time to read it.

Can't Find What You Need?

Check out our FAQ section which may help you find the information you're looking for.

FAQ Section