@workday/canvas-kit-docs/dist/mdx/react/loading-dots/LoadingDots.mdx

Documentation components of Canvas Kit components

import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
import Basic from './examples/Basic';
import RTL from './examples/RTL';
import Accessible from './examples/Accessible';
import CustomShape from './examples/CustomShape';
import CustomColorAndAnimation from './examples/CustomColorAndAnimation';
import Inverse from './examples/Inverse';

# Canvas Kit Loading Dots

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

[> Workday Design Reference](https://canvas.workdaydesign.com/components/indicators/loading-dots/)

## Installation

```sh
yarn add @workday/canvas-kit-react
```

## Usage

### Basic Example

Use Loading Dots to identify when a specific area of the page is loading (i.e. the content within a card).

<ExampleCodeBlock code={Basic} />

### Inverse Variant

Use the `variant="inverse"` prop when the loading dots are on a dark background or image.

<ExampleCodeBlock code={Inverse} />

### Right-to-Left (RTL)

<ExampleCodeBlock code={RTL} />

### Custom Shape

<ExampleCodeBlock code={CustomShape} />

### Custom Color and Animation

<ExampleCodeBlock code={CustomColorAndAnimation} />

### Custom Styles

Loading Dots supports custom styling via the `cs` prop. For more information, check our
["How To Customize Styles"](https://workday.github.io/canvas-kit/?path=/docs/styling-guides-customizing-styles--docs).

Custom styling is also supported through the [Loading Dots documented props below](#props).

### Accessibility

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

<ExampleCodeBlock code={Accessible} />

## Component API

<SymbolDoc name="LoadingDots" fileName="/react/" />