@zendeskgarden/react-loaders

What is @zendeskgarden/react-loaders?

@zendeskgarden/react-loaders is a collection of React components that provide loading indicators for applications. These components are designed to be visually appealing and customizable, making it easy to integrate them into any React project to enhance user experience during data fetching or processing operations.

What are @zendeskgarden/react-loaders's main functionalities?

Dots Loader

The Dots loader is a simple and elegant loading indicator that consists of animated dots. It can be customized in terms of size and color to fit the design of your application.

<Dots size="large" color="blue" />

Spinner Loader

The Spinner loader is a classic circular loading indicator. It is highly customizable, allowing developers to adjust its size and color to match their application's theme.

<Spinner size="medium" color="green" />

Progress Loader

The Progress loader provides a visual representation of a task's completion status. It is useful for operations where the progress can be quantified, such as file uploads or data processing tasks.

<Progress value={50} max={100} />

Other packages similar to @zendeskgarden/react-loaders

react-spinners

react-spinners is a popular package that provides a variety of loading spinners for React applications. It offers a wide range of spinner types and customization options, similar to @zendeskgarden/react-loaders, but with a focus on providing a diverse set of spinner styles.

react-loader-spinner

react-loader-spinner is another package that offers a collection of loading spinners for React. It provides a comprehensive set of spinner components with various styles and animations, comparable to @zendeskgarden/react-loaders in terms of functionality and customization.

react-loading

react-loading is a lightweight package that provides a set of simple loading indicators for React applications. While it offers fewer customization options compared to @zendeskgarden/react-loaders, it is a good choice for developers looking for minimalistic and easy-to-use loading components.

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>;