Skip to main content
The @zendeskgarden/react-loaders package provides components for representing loading and progress states. All components require a ThemeProvider at the root of your application.

​
Installation

npm install @zendeskgarden/react-loaders

# Peer dependencies
npm install react react-dom styled-components @zendeskgarden/react-theming

​
Skeleton

A placeholder that mimics the shape of content while it loads. Use Skeleton to reduce perceived load time and prevent layout shift.
Stack multiple Skeleton elements with varying widths to approximate the shape of the content that will replace them.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Skeleton } from '@zendeskgarden/react-loaders';

<ThemeProvider>
  <Skeleton width="60%" />
  <Skeleton width="80%" />
  <Skeleton width="40%" />
</ThemeProvider>

​
Skeleton props

​
body.width
string
Sets the width as a percentage of the parent element’s width. For example, '75%'.
​
body.height
string
Sets the height as a percentage of the parent element’s height when height is not already inherited from line-height.
​
body.isLight
boolean
Inverts the skeleton color for use on dark backgrounds.

​
Spinner

An animated circular indicator for indeterminate loading states. Use Spinner when an operation is in progress and the duration is unknown.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Spinner } from '@zendeskgarden/react-loaders';

<ThemeProvider>
  <Spinner />
</ThemeProvider>

​
Spinner props

​
body.size
string
Sets the height and width of the spinner in pixels. Inherits the parent element’s font size by default.
​
body.color
string
Sets the fill color. Accepts a Garden color variable key (for example, 'foreground.primary') or any hex value. Inherits the parent’s color by default.
​
body.duration
number
Sets the length of one animation cycle in milliseconds.
​
body.delayMS
number
Delays rendering the spinner to avoid a flash during fast load times. Useful when the loading state may resolve quickly.

​
Dots

An animated three-dot indicator for indeterminate loading states. Use Dots as a compact alternative to Spinner, particularly inside buttons or inline text.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Dots } from '@zendeskgarden/react-loaders';

<ThemeProvider>
  <Dots />
</ThemeProvider>

​
Dots props

​
body.size
string | number
Sets the height and width of the dots in pixels. Inherits the parent element’s font size by default.
​
body.color
string
Sets the fill color. Accepts a Garden color variable key (for example, 'foreground.primary') or any hex value. Inherits the parent’s color by default.
​
body.duration
number
Sets the length of one animation cycle in milliseconds.
​
body.delayMS
number
Delays rendering the dots to avoid a flash during fast load times.

​
Inline

A compact animated loader sized to fit inline with text content. Use Inline when you need a loader that visually integrates into a line of text or a small container.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Inline } from '@zendeskgarden/react-loaders';

<ThemeProvider>
  <Inline />
</ThemeProvider>

​
Inline props

​
body.size
number
Sets the width in pixels and scales the loader height proportionally.
​
body.color
string
Sets the fill color. Accepts a Garden color variable key (for example, 'foreground.primary') or any hex value. Inherits the parent’s color by default.

​
Progress

A determinate horizontal bar for communicating measurable progress. Use Progress when you know the percentage of a task that has been completed.

​
Usage

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Progress } from '@zendeskgarden/react-loaders';

<ThemeProvider>
  <Progress value={65} />
</ThemeProvider>

​
Controlled progress

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { Progress } from '@zendeskgarden/react-loaders';
import { useState, useEffect } from 'react';

const [value, setValue] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setValue(prev => {
      if (prev >= 100) {
        clearInterval(interval);
        return 100;
      }
      return prev + 10;
    });
  }, 500);

  return () => clearInterval(interval);
}, []);

<ThemeProvider>
  <Progress value={value} size="medium" />
</ThemeProvider>

​
Progress props

​
body.value
number
The current progress as a number between 0 and 100.
​
body.size
string
default:"small"
Adjusts the height of the progress bar. Accepts 'small', 'medium', or 'large'.
​
body.color
string
Sets the foreground bar’s fill color. Accepts a Garden color variable key (for example, 'border.primaryEmphasis') or any hex value. Defaults to the border.successEmphasis theme value.

Build docs developers (and LLMs) love

Get started for freeTalk to us