Package Exports

@zendeskgarden/react-loaders
@zendeskgarden/react-loaders/dist/index.cjs.js
@zendeskgarden/react-loaders/dist/index.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@zendeskgarden/react-loaders) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@zendeskgarden/react-loaders

This package includes components relating to loaders in the Garden Design System.

Installation

npm install @zendeskgarden/react-loaders

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

Dots

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Dots />;
</ThemeProvider>;

Inline

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Inline />
</ThemeProvider>;

Progress

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Progress value={40} />
</ThemeProvider>;

Skeleton

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Skeleton />;
</ThemeProvider>;

Spinner

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

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <Spinner />;
</ThemeProvider>;