### Quick Start Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

A basic example of how to use the Audio spinner component.

```jsx
import { Audio } from 'react-loader-spinner'

function App() {
  return (
    <Audio
      height="80"
      width="80"
      color="#4fa94d"
      ariaLabel="audio-loading"
      wrapperStyle={{}}
      wrapperClass="wrapper-class"
      visible={true}
    />
  )
}
```

--------------------------------

### Installation

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/intro.md

Install the react-loader-spinner package using npm or yarn.

```bash
npm install react-loader-spinner
# or
yarn add react-loader-spinner
```

--------------------------------

### Installation with yarn

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Install the react-loader-spinner package using yarn.

```bash
yarn add react-loader-spinner
```

--------------------------------

### Puff Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/puff.mdx

An example of how to use the Puff component with live preview, editor, and error handling.

```javascript
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { Puff } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<Puff
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="puff-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ Puff }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Installation with npm

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Install the react-loader-spinner package using npm.

```bash
npm install react-loader-spinner
```

--------------------------------

### Watch Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/watch.mdx

A basic example demonstrating how to use the Watch component with its primary props.

```jsx
render(<Watch
  visible={true}
  height="80"
  width="80"
  radius="48"
  color="#4fa94d"
  ariaLabel="watch-loading"
  wrapperStyle={{}}
  wrapperClass=""
/>)
```

--------------------------------

### Custom Styling Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Example of using the ThreeDots spinner with custom wrapper styling.

```jsx
import { ThreeDots } from 'react-loader-spinner'
;<ThreeDots
  height="80"
  width="80"
  radius="9"
  color="#4fa94d"
  ariaLabel="three-dots-loading"
  wrapperStyle={{ margin: '20px' }}
  wrapperClass="custom-loader"
  visible={true}
/>
```

--------------------------------

### Grid Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/grid.mdx

A live example demonstrating the usage of the Grid component with various props.

```javascript
render(<Grid
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="grid-loading"
  radius="12.5"
  wrapperStyle={{}}
  wrapperClass="grid-wrapper"
/>)
```

--------------------------------

### Basic Usage Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Example of using the Oval spinner with basic props.

```jsx
import { Oval } from 'react-loader-spinner'
;<Oval
  height={80}
  width={80}
  color="#4fa94d"
  visible={true}
  ariaLabel="oval-loading"
  secondaryColor="#4fa94d"
  strokeWidth={2}
  strokeWidthSecondary={2}
/>
```

--------------------------------

### ProgressBar Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/progress-bar.mdx

A live example demonstrating the usage of the ProgressBar component with various props.

```javascript
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { ProgressBar } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<ProgressBar
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="progress-bar-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ ProgressBar }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### RevolvingDot Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/revolving-dot.mdx

A basic example of how to use the RevolvingDot component with live editing capabilities.

```jsx
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { RevolvingDot } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<RevolvingDot
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="revolving-dot-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ RevolvingDot }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Audio Component Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/audio.mdx

A live, interactive example of the Audio component with customizable props.

```javascript
render(<Audio
  height="100"
  width="100"
  color="#4fa94d"
  ariaLabel="audio-loading"
  wrapperStyle={{}}
  wrapperClass="wrapper-class"
  visible={true}
  />)
```

--------------------------------

### Rings Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/rings.mdx

A live example demonstrating the usage of the Rings component with customizable props.

```jsx
render(<Rings
visible={true}
height="80"
width="80"
color="#4fa94d"
ariaLabel="rings-loading"
wrapperStyle={{}}
wrapperClass=""
/>)
```

--------------------------------

### Comment Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/comment.mdx

This example demonstrates how to use the Comment component with various props to customize its appearance and behavior.

```jsx
render(<Comment
  visible={true}
  height="80"
  width="80"
  ariaLabel="comment-loading"
  wrapperStyle={{}}
  wrapperClass="comment-wrapper"
  color="#fff"
  backgroundColor="#F4442E"
/>)
```

--------------------------------

### Hourglass Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/hourglass.mdx

A live example demonstrating the usage of the Hourglass component with customizable properties.

```javascript
render(<Hourglass
visible={true}
height="80"
width="80"
ariaLabel="hourglass-loading"
wrapperStyle={{}}
wrapperClass=""
colors={['#306cce', '#72a1ed']}
/>)
```

--------------------------------

### Conditional Rendering Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Example of conditionally rendering the TailSpin spinner based on a loading state.

```jsx
import { TailSpin } from 'react-loader-spinner'

function MyComponent() {
  const [loading, setLoading] = useState(true)

  return (
    <div>
      <TailSpin
        height="80"
        width="80"
        color="#4fa94d"
        ariaLabel="tail-spin-loading"
        visible={loading}
      />
    </div>
  )
}
```

--------------------------------

### Bars Component Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/bars.mdx

A live, interactive example of the Bars component with adjustable props.

```javascript
render(<Bars
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="bars-loading"
  wrapperStyle={{}}
  wrapperClass=""
  visible={true}
  />)
```

--------------------------------

### TypeScript Support Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Example demonstrating TypeScript support with common props and custom wrapper styles.

```tsx
import { Audio } from 'react-loader-spinner'
import type { CSSProperties } from 'react'

const wrapperStyle: CSSProperties = {
  display: 'flex',
  justifyContent: 'center',
}

<Audio height="80" width="80" color="blue" wrapperStyle={wrapperStyle} />
```

--------------------------------

### Fidget Spinner Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/fidget-spinner.mdx

A basic example of how to use the FidgetSpinner component with live editing capabilities.

```javascript
render(<FidgetSpinner
  visible={true}
  height="80"
  width="80"
  ariaLabel="fidget-spinner-loading"
  wrapperStyle={{}}
  wrapperClass="fidget-spinner-wrapper"
/>)
```

--------------------------------

### Radio Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/radio.mdx

A basic example of how to use the Radio component with its primary props.

```javascript
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { Radio } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<Radio
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="radio-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ Radio }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Circles Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/circles.mdx

A live example of the Circles loader component with customizable props.

```javascript
render(<Circles
height="80"
width="80"
color="#4fa94d"
ariaLabel="circles-loading"
wrapperStyle={{}}
wrapperClass=""
visible={true}
/>)
```

--------------------------------

### Vortex Component Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/vortex.mdx

A live, interactive example of the Vortex loader spinner component, demonstrating its usage with various colors.

```javascript
render(<Vortex
visible={true}
height="80"
width="80"
ariaLabel="vortex-loading"
wrapperStyle={{}}
wrapperClass="vortex-wrapper"
colors={['red', 'green', 'blue', 'yellow', 'orange', 'purple']}
/>)
```

--------------------------------

### DNA Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/dna.mdx

A basic example of how to use the DNA loader spinner component with live editing capabilities.

```jsx
render(<DNA
  visible={true}
  height="80"
  width="80"
  ariaLabel="dna-loading"
  wrapperStyle={{}}
  wrapperClass="dna-wrapper"
/>)
```

--------------------------------

### Three Circles Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/three-circles.mdx

An example of how to use the ThreeCircles component with live editing capabilities.

```javascript
render(<ThreeCircles
visible={true}
height="100"
width="100"
color="#4fa94d"
ariaLabel="three-circles-loading"
wrapperStyle={{}}
wrapperClass=""
/>)
```

--------------------------------

### Hearts Component Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/hearts.mdx

A live, interactive example of the Hearts component with customizable props.

```javascript
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { Hearts } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<Hearts
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="hearts-loading"
  wrapperStyle={{}}
  wrapperClass=""
  visible={true}
  />)
`}
  scope={{ Hearts }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Three Dots Spinner Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/three-dots.mdx

An interactive example of the Three Dots spinner component using react-live.

```jsx
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { ThreeDots } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<ThreeDots
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  radius="9"
  ariaLabel="three-dots-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ ThreeDots }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Rotating Triangles Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/rotating-triangles.mdx

An interactive example of the Rotating Triangles component using react-live.

```jsx
render(<RotatingTriangles
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="rotating-triangles-loading"
  wrapperStyle={{}}
  wrapperClass=""
/>)
```

--------------------------------

### Rotating Lines Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/rotating-lines.mdx

A live, interactive example of the Rotating Lines component using react-live.

```jsx
render(<RotatingLines
  visible={true}
  height="96"
  width="96"
  color="grey"
  strokeWidth="5"
  animationDuration="0.75"
  ariaLabel="rotating-lines-loading"
  wrapperStyle={{}}
  wrapperClass=""
/>)
```

--------------------------------

### Ball Triangle Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/ball-triangle.mdx

A live, interactive example of the Ball Triangle component with customizable props.

```javascript
render(<BallTriangle
  height={100}
  width={100}
  radius={5}
  color="#4fa94d"
  ariaLabel="ball-triangle-loading"
  wrapperStyle={{}}
  wrapperClass=""
  visible={true}
  />)
```

--------------------------------

### MagnifyingGlass Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/magnifying-glass.mdx

A live, interactive example of the MagnifyingGlass component, demonstrating its usage and appearance. Includes LiveProvider, LiveEditor, LiveError, and LivePreview from react-live.

```jsx
render(<MagnifyingGlass
visible={true}
height="80"
width="80"
ariaLabel="magnifying-glass-loading"
wrapperStyle={{}}
wrapperClass="magnifying-glass-wrapper"
glassColor="#c0efff"
color="#e15b64"
/>)
```

--------------------------------

### Triangle Component Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/triangle.mdx

Example of how to use the Triangle component with live editing capabilities.

```javascript
render(<Triangle
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="triangle-loading"
  wrapperStyle={{}}
  wrapperClass=""
/>)
```

--------------------------------

### Live Example of Color Ring

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/color-ring.mdx

A live-editing example demonstrating the Color Ring component with customizable colors.

```jsx
render(<ColorRing
visible={true}
height="80"
width="80"
ariaLabel="color-ring-loading"
wrapperStyle={{}}
wrapperClass="color-ring-wrapper"
colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']}
/>)
```

--------------------------------

### Circles With Bar Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/circles-with-bar.mdx

An example of how to use the CirclesWithBar component with various props to control its appearance and behavior.

```jsx
render(<CirclesWithBar
  height="100"
  width="100"
  color="#4fa94d"
  outerCircleColor="#4fa94d"
  innerCircleColor="#4fa94d"
  barColor="#4fa94d"
  ariaLabel="circles-with-bar-loading"
  wrapperStyle={{}}
  wrapperClass=""
  visible={true}
  />)
```

--------------------------------

### Rotating Square Live Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/rotating-square.mdx

A live, interactive example of the Rotating Square component using react-live.

```jsx
render(<RotatingSquare
visible={true}
height="100"
width="100"
color="#4fa94d"
ariaLabel="rotating-square-loading"
wrapperStyle={{}}
wrapperClass=""
/>)
```

--------------------------------

### Falling Lines Component Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/falling-lines.mdx

An example of how to use the FallingLines component with customizable props like color, width, and visibility.

```jsx
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { FallingLines } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<FallingLines
  color="#4fa94d"
  width="100"
  visible={true}
  ariaLabel="falling-circles-loading"
  />)
`}
  scope={{ FallingLines }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Discuss Component Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/discuss.mdx

Example of how to use the Discuss component with live editing capabilities.

```jsx
render(<Discuss
  visible={true}
  height="80"
  width="80"
  ariaLabel="discuss-loading"
  wrapperStyle={{}}
  wrapperClass="discuss-wrapper"
  color="#fff"
  backgroundColor="#F4442E"
/>)
```

--------------------------------

### Basic LineWave Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/line-wave.mdx

A basic example of how to use the LineWave component with essential props.

```jsx
render(<LineWave
  visible={true}
  height="100"
  width="100"
  color="#4fa94d"
  ariaLabel="line-wave-loading"
  wrapperStyle={{}}
  wrapperClass=""
  firstLineColor=""
  middleLineColor=""
  lastLineColor=""
/>)
```

--------------------------------

### Blocks Component Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/blocks.mdx

Example of how to use the Blocks component with live editing capabilities.

```jsx
render(<Blocks
height="80"
width="80"
color="#4fa94d"
ariaLabel="blocks-loading"
wrapperStyle={{}}
wrapperClass="blocks-wrapper"
visible={true}
/>)
```

--------------------------------

### Mutating Dots Example

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/mutating-dots.mdx

This code snippet demonstrates how to use the MutatingDots component with its basic props for a loading indicator.

```jsx
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { MutatingDots } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<MutatingDots
  visible={true}
  height="100"
  width="100"
  color="#4fa94d"
  secondaryColor="#4fa94d"
  radius="12.5"
  ariaLabel="mutating-dots-loading"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ MutatingDots }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Infinity Spin Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/infinity-spin.mdx

Example of how to use the InfinitySpin component with specified width and color.

```javascript
render(<InfinitySpin
width="200"
color="#4fa94d"
/>)
```

--------------------------------

### Basic Oval Spinner

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/oval.mdx

A basic example of how to render the Oval spinner component with essential props.

```jsx
render(<Oval
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="oval-loading"
  wrapperStyle={{}}
  wrapperClass=""
/>)
```

--------------------------------

### CircularProgress Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/circular-progress.mdx

Example of how to use the CircularProgress component with various props.

```jsx
render(<CircularProgress
height="100"
width="100"
color="#4fa94d"
ariaLabel="circular-progress-loading"
wrapperStyle={{}}
wrapperClass="wrapper-class"
visible={true}
strokeWidth={2}
animationDuration={1}
/>)
```

--------------------------------

### LineWave with Custom Colors

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/line-wave.mdx

Examples demonstrating how to customize the colors of the LineWave component.

```jsx
<LineWave color="red" firstLineColor="green" />
```

```jsx
<LineWave color="red" middleLineColor="green" lastLineColor="green" />
```

```jsx
<LineWave
  color="red"
  firstLineColor="blue"
  middleLineColor="green"
  lastLineColor="grey"
/>
```

--------------------------------

### TailSpin Component Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/tail-spin.mdx

Example of how to use the TailSpin component with live editing capabilities.

```javascript
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'
import { TailSpin } from 'react-loader-spinner'

<LiveProvider
  code={`
  render(<TailSpin
  visible={true}
  height="80"
  width="80"
  color="#4fa94d"
  ariaLabel="tail-spin-loading"
  radius="1"
  wrapperStyle={{}}
  wrapperClass=""
  />)
`}
  scope={{ TailSpin }}
  noInline={true}
>
  <LivePreview />
  <br />
  <LiveEditor />
  <LiveError />
</LiveProvider>
```

--------------------------------

### Customized Oval Spinner 1

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/oval.mdx

An example demonstrating customization of the Oval spinner with different stroke widths and colors.

```jsx
<Oval
  ariaLabel="loading-indicator"
  height={100}
  width={100}
  strokeWidth={5}
  strokeWidthSecondary={1}
  color="blue"
  secondaryColor="white"
/>
```

--------------------------------

### Customized Oval Spinner 3

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/oval.mdx

A third example illustrating Oval spinner customization with extreme stroke widths for visual effect.

```jsx
<Oval
  ariaLabel="loading-indicator"
  height={100}
  width={100}
  strokeWidth={2000}
  strokeWidthSecondary={2030}
  color="blue"
  secondaryColor="Grey"
/>
```

--------------------------------

### Customized Oval Spinner 2

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/oval.mdx

Another example of Oval spinner customization, showcasing varied stroke width and secondary color effects.

```jsx
<Oval
  ariaLabel="loading-indicator"
  height={100}
  width={100}
  strokeWidth={1}
  strokeWidthSecondary={2000}
  color="blue"
  secondaryColor="red"
/>
```

--------------------------------

### Basic Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/intro.md

Demonstrates how to import and use the Audio component from react-loader-spinner.

```tsx
import { Audio } from 'react-loader-spinner'

export function Example() {
  return (
    <Audio
      height={80}
      width={80}
      radius={9}
      color="green"
      ariaLabel="audio-loading"
      wrapperStyle={{}}
      wrapperClass=""
    />
  )
}
```

--------------------------------

### Basic Whirl Component Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/whirl.mdx

Demonstrates the basic usage of the Whirl component with a 'rainbow' preset and custom speed.

```jsx
<Whirl
      preset='rainbow'
      speedInSecond={2}
      width='100'
      height='100'
    />
```

--------------------------------

### Tree-shaking with Direct Imports

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/README.md

Demonstrates how to import components directly for better tree-shaking, and also shows named imports.

```jsx
// Direct import (better for tree-shaking)
import { Audio } from 'react-loader-spinner/dist/esm/loader/audio'

// Or use named imports (also tree-shakeable)
import { Audio, Oval, ThreeDots } from 'react-loader-spinner'
```

--------------------------------

### Whirl Component with Different Presets

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/whirl.mdx

Shows multiple instances of the Whirl component utilizing various built-in presets with different speeds.

```jsx
<div style={{ display: 'flex' }}>
  <Whirl />
  <Whirl speedInSecond={1} preset={WhirlPreset.midnight} />
  <Whirl speedInSecond={2} preset={WhirlPreset.midday} />
  <Whirl speedInSecond={3} preset={WhirlPreset.rainbow} />
  <Whirl speedInSecond={4} preset={WhirlPreset.forest} />
  <Whirl speedInSecond={5} preset={WhirlPreset.dawn} />
  <Whirl speedInSecond={6} preset={WhirlPreset.dusk} />
  <Whirl speedInSecond={7} preset={WhirlPreset.sunrise} />
</div>
```

--------------------------------

### Basic Hairball Usage

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/hairball.mdx

This code snippet demonstrates the basic usage of the Hairball component with a preset.

```jsx
import {
  Hairball,
  HairballPreset
} from 'react-loader-spinner'

// ... inside your component
<Hairball
  preset="dawn" // or preset={HairballPreset.sunset}
/>
```

--------------------------------

### Whirl Component with Custom Colors

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/whirl.mdx

Illustrates how to use the Whirl component with custom color values provided via the 'colors' prop.

```jsx
<Whirl
  colors={{
    fillColor1: '#ff0000',
    fillColor2: '#00ff00',
    fillColor3: '#0000ff',
    fillColor4: '#ffff00'
  }}
  speedInSecond={3}
/>
```

--------------------------------

### Custom Colors Prop Structure

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/whirl.mdx

Provides the JSX code structure for defining custom colors for the Whirl component.

```jsx
<Whirl
  colors={{
    fillColor1: '#ff0000',
    fillColor2: '#00ff00',
    fillColor3: '#0000ff',
    fillColor4: '#ffff00'
  }}
/>
```

--------------------------------

### Color Ring Component

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/components/color-ring.mdx

A basic implementation of the Color Ring loader.

```jsx
<ColorRing
  visible={true}
  height="80"
  width="80"
  ariaLabel="blocks-loading"
  wrapperStyle={{}}
  wrapperClass="blocks-wrapper"
  colors={['#b8c480', '#B2A3B5', '#F4442E', '#51E5FF', '#429EA6']}
/>
```

--------------------------------

### Hairball with Custom Colors

Source: https://github.com/mhnpd/react-loader-spinner/blob/master/docs/docs/experimental/hairball.mdx

This code snippet shows how to use the Hairball component with custom colors.

```jsx
<Hairball
  colors={{
    fillColor1: '#ff0000',
    fillColor2: '#00ff00',
    fillColor3: '#0000ff',
    fillColor4: '#ffff00'
  }}
/>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.