The Hairball component supports several predefined color schemes via the preset prop. You can use the HairballPreset enum to select a scheme.

Available presets include:

• HairballPreset.midnight
• HairballPreset.midday
• HairballPreset.rainbow
• HairballPreset.forest
• HairballPreset.dawn
• HairballPreset.dusk
• HairballPreset.sunrise
• HairballPreset.sunset (and others defined in HairballPresetColors)

<Hairball preset={HairballPreset.midnight} />

You can install the package using npm or yarn to add the SVG spinner components to your React project.

npm install react-loader-spinner

Or using yarn:

yarn add react-loader-spinner

To get started, import a spinner component (e.g., Audio) and pass the required props like height, width, and color.

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}
    />
  )
}

The Hairball component is an experimental spinner. It is recommended to use the built-in HairballPreset to manage color schemes, as they are designed to work optimally with the component. You can import the component and presets from the experimental path.

Note: As this is an experimental feature, you may need to import from react-loader-spinner/dist/beta or the specific experimental source path depending on your installation.

```jsx
import { Hairball, HairballPreset } from 'react-loader-spinner/dist/beta';

// Usage with a preset
<Hairball preset={HairballPreset.sunset} />
```埋

To ensure optimal bundle size, you can use direct imports to only include the specific spinner you are using in your final build.

// 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'

To use the library in your React project, install the react-loader-spinner package using your preferred package manager.

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

You can render a gradient instead of a solid color by providing an array of strings to the colors prop.

• colors: Pass an array containing 2 or more color strings.
• gradientType: Set to 'linear' (default) or 'radial' to control the gradient style.
• gradientAngle: If using a 'linear' gradient, provide a number to set the rotation angle in degrees.

<Comment 
  colors={['#ff0000', '#00ff00', '#0000ff']} 
  gradientType="linear" 
  gradientAngle={45} 
/>

The package is configured to support deep imports for individual loaders. This allows you to import specific spinners directly to optimize your bundle size via tree-shaking, rather than importing the entire library.

For example, if a loader named Oval.tsx exists in the source, you can import it using the pattern: import Oval from 'react-loader-spinner/oval' (the exact path depends on the exported entry point).

// Example of the pattern enabled by the build configuration
import Oval from 'react-loader-spinner/oval';

The LineWave component supports rendering gradients instead of solid colors by providing an array of colors to the colors prop.

• colors: Pass an array of two or more color strings to trigger gradient rendering.
• gradientType: Set to 'linear' (default) or 'radial' to define the gradient style.
• gradientAngle: For 'linear' gradients, provide a number representing the rotation angle in degrees.

Note: While the component interface defines these props, the specific implementation of the gradient rendering logic is handled internally via the colors array.

<LineWave 
  colors={['#ff0000', '#00ff00', '#0000ff']} 
  gradientType="linear" 
  gradientAngle={45} 
/>

The Vortex component is a loading spinner available in react-loader-spinner. You can customize its appearance using props such as colors, height, width, and ariaLabel.

import { Vortex } from 'react-loader-spinner';

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

The CirclesWithBar component renders a loading animation consisting of circles and a bar. You can customize its dimensions, colors for each element, and accessibility labels via props.

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

The RotatingTriangles component accepts a colors prop, which allows you to pass an array of color strings to style the triangles. This is useful for creating multi-colored or themed loading animations.

// Example with custom color array
<RotatingTriangles colors={['#8C5E58', '#2B061E', '#361134']} />

// Example with a different color palette
<RotatingTriangles colors={['#51E5FF', '#7DE2D1', '#FF7E6B']} />