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
yarn add @workday/canvas-kit-react


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).


Basic Example

Right-to-Left (RTL)

Custom Styles

Loading Dots supports custom styling via the cs prop. For more information, check our "How To Customize Styles".

Adding screen reader support to loading animations

Sometimes, letting users know when content has finished loading is just as important as asking users to "please wait" while content is loading. The disappearance of an animation is information that might need description. In this example, we are using AriaLiveRegion and AccessibleHide components included in Canvas to describe both the appearance and disappearance of LoadingDots.

  • When idle, render an empty live region
  • When loading, render LoadingDots inside the live region,
  • When complete, render AccessibleHide inside the live region expressing "Complete!"
  • We can assign a name to AriaLiveRegion component by passing in aria-label="Loading"
  • We can declare LoadingDots a labeled graphic by passing role="img" and aria-label="Please wait..." into the component


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