Skip to main content
Table of Contents

Spinner

A Spinner appears before a page is loaded to assure a user that the content is on its way.

Table of Contents
Used for this
  • When the content to be loaded is unknown or unpredictable
Not for this
  • When page content is easily estimated, use a Skeleton instead
  • To indicate a loading state within a component (like menus, inputs, or buttons) use Dots instead

How to use it

Default

Spinners communicate a loading state for an unspecified amount of time.

Color

By default, color is inherited from the parent element. Color can be explicitly set.

Size

By default, the size is inherited from the font size of the parent element. Size can be explicitly set.

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 { Spinner } from '@zendeskgarden/react-loaders'

API

Spinner

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
'inherit'
Sets the height and width in pixels. Inherits the parent's font size by default.