Loading Animation

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

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

Anatomy

Image of a Loading Animation with annotation markers.

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

Usage Guidance

  • Use Loading Animations 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 Animation to reinforce that the content on the page is loading behind the scenes.
  • Avoid increasing the size of the Loading Animation to maintain consistency with other indicators accross the application.
  • Always center the Loading Animation 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 Animation 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)

Props

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

Accessibility Guidelines

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

Content Guidelines

  • Loading Animations typically should not appear long enough to require any content.
  • In rare use cases it may be helpful to support the Loading Animation 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