Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/zendeskgarden/website/llms.txt

Use this file to discover all available pages before exploring further.

import { Dots, Spinner, Progress, Skeleton } from '@zendeskgarden/react-loaders';
The @zendeskgarden/react-loaders package provides four components for communicating loading states. Choose the right one based on what is loading and whether the duration is known.
ComponentBest forDuration known?
SkeletonPage/section content with a predictable layoutNo
SpinnerIndeterminate full-page or section loadNo
DotsSingle component busy state (button, input)No
ProgressFile upload/download with a measurable percentageYes

​
Dots

An inline loading indicator that communicates ongoing activity after a user action. Use Dots when a single component — like a Button or Search input — is busy. For page loading, use Skeleton or Spinner. 
import { Dots } from '@zendeskgarden/react-loaders';

const Example = () => <Dots />;

​
With explicit size and color

By default, size and color are inherited from the parent element’s font-size and color. 
import { Dots } from '@zendeskgarden/react-loaders';

const Example = () => (
  <Dots size="24px" color="#1f73b7" />
);
​
size
string | number
Explicit size for the loader. When omitted, inherits from the parent font size.
​
color
string
Explicit color. When omitted, inherits from the parent element’s color.
The Dots component includes role="progressbar" and aria-valuetext="Loading" by default, identifying it as an indeterminate progress indicator for assistive technologies.

​
Spinner

A circular spinner that communicates an unknown loading time. Use when page content is unknown or unpredictable. When the content layout can be estimated, use Skeleton instead. When a single component is busy, use Dots. 
import { Spinner } from '@zendeskgarden/react-loaders';

const Example = () => <Spinner />;

​
With explicit size and color

Size and color are inherited from the parent by default. 
import { Spinner } from '@zendeskgarden/react-loaders';

const Example = () => (
  <Spinner size="48px" color="#1f73b7" />
);
​
size
string | number
Explicit width/height for the spinner SVG. Inherits from parent font size when omitted.
​
color
string
Explicit color. Inherits from the parent color property when omitted.
​
duration
number
The animation duration in milliseconds. Defaults to 1250.

​
Progress

A horizontal progress bar for communicating a known percentage of completion — typically file uploads or downloads. When loading time is unknown, use Spinner. When loading page content, use Skeleton. 
import { Progress } from '@zendeskgarden/react-loaders';

const Example = () => (
  <Progress value={50} aria-label="Preparing garden" />
);

​
Sizes

The Progress loader is medium by default. It can also be small or large. 
<Progress value={25} size="small" aria-label="Upload progress" />
<Progress value={50} size="medium" aria-label="Upload progress" />
<Progress value={75} size="large" aria-label="Upload progress" />

​
Custom color

The default foreground color is the success color. You can override it with the color prop. 
<Progress value={60} color="#d93f4c" aria-label="Critical task" />
​
value
number
required
The current progress as a number from 0 to 100.
​
size
'small' | 'medium' | 'large'
The height of the progress bar. Defaults to 'medium'.
​
color
string
The fill color of the progress bar. Defaults to the Garden success color.
​
aria-label
string
Accessible label describing what is loading. Required when no visible label is present.

​
Skeleton

A content placeholder shown while the layout is loading. Skeleton is the default loader when the system can predict the format of the incoming content. It avoids large layout shifts by reserving space. Use Skeleton for progressive page loading. When the content format is unknown, use Spinner. When indicating a component is busy, use Dots. 
import { Skeleton } from '@zendeskgarden/react-loaders';
import { MD, XXL } from '@zendeskgarden/react-typography';

const Example = () => (
  <>
    <XXL>
      <Skeleton />
    </XXL>
    <MD>
      <Skeleton />
      <Skeleton />
      <Skeleton />
    </MD>
  </>
);

​
Light variant

Skeleton loaders can be inverted for use on dark backgrounds. 
<Skeleton isLight />

​
Explicit size

By default, Skeleton height is 60% of the parent font size. Set explicit height and width to create placeholders for non-text components (e.g., buttons, avatars). 
<Skeleton style={{ width: '120px', height: '36px', borderRadius: '4px' }} />
​
isLight
boolean
Inverts the skeleton color for use on dark backgrounds. Defaults to false.
Nest Skeleton inside typography components (MD, LG, XXL, etc.) to automatically match the font size of the text it is replacing.