Skip to main content
Table of Contents

Dots

The Dots loader communicates ongoing activity after a user takes an action. It tells them that something is taking place.

Table of Contents
Used for this
  • To indicate that a single component, like a Button or Search input, is doing something
Not for this
  • To communicate a page is loading, use a Skeleton loader or Spinner instead
  • To communicate typing status, use an Inline loader instead
  • To communicate progress, use a Progress loader instead

How to use it

Default

The default application of a Dots loader includes accessibility attributes that identify it as an indeterminate progress bar.

Color

By default, color is inherited from the parent element unless specified.

Size

By default, size is inherited from font size unless specified.

Configuration

  • Name9.0.0-next.26•View source•View on npm
  • Installnpm install @zendeskgarden/react-loaders
  • Depsnpm install react react-dom styled-components @zendeskgarden/react-theming
  • Importimport { Dots } from '@zendeskgarden/react-loaders'

API

Dots

Extends SVGAttributes<SVGSVGElement>

Prop nameTypeDefaultDescription
color
string
'inherit'
Sets the fill color. Inherits the parent's color by default.
delayMS
number
750
Delays displaying the loader to prevent a render flash during normal loading times *
duration
number
1250
Sets the length of the animation cycle in milliseconds *
size
string | number
inherit
Sets the height and width in pixels. Inherits the parent's font size by default.