### Responsive GridLoader Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/GridLoader.md

This example demonstrates how to use the GridLoader component and dynamically adjust its size based on the window width. It includes setup for state management and event listeners for window resizing.

```typescript
import { GridLoader } from 'react-spinners';
import { useState, useEffect } from 'react';

function ResponsiveGridLoader() {
  const [size, setSize] = useState(15);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setSize(10);
      } else if (window.innerWidth < 1024) {
        setSize(15);
      } else {
        setSize(20);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize(); // Call on mount
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <GridLoader
      color="#FF9800"
      loading={true}
      size={size}
      margin={3}
    />
  );
}
```

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

### Install Dependencies

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Install the necessary project dependencies using either npm or yarn. This is required before running any development commands.

```bash
npm install
```

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

### Install react-spinners with Yarn

Source: https://github.com/davidhu2000/react-spinners/blob/main/README.md

Use this command to add react-spinners to your project if you are using Yarn.

```bash
yarn add react-spinners
```

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

### Basic ClipLoader Usage Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ClipLoader.md

Demonstrates how to use the ClipLoader component with basic props and a toggle button.

```typescript
import { ClipLoader } from 'react-spinners';
import { CSSProperties, useState } from 'react';

function LoadingComponent() {
  const [loading, setLoading] = useState(true);
  
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
  };

  return (
    <>
      <button onClick={() => setLoading(!loading)}>Toggle</button>
      <ClipLoader
        color="#36d7b7"
        loading={loading}
        cssOverride={override}
        size={100}
        speedMultiplier={1.2}
        aria-label="Loading spinner"
      />
    </>
  );
}
```

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

### Install react-spinners with npm

Source: https://github.com/davidhu2000/react-spinners/blob/main/README.md

Use this command to add react-spinners to your project if you are using npm.

```bash
npm install --save react-spinners
```

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

### Advanced BarLoader Configuration Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/API_INDEX.md

Shows advanced configuration of the BarLoader component, including CSS overrides for positioning and styling, and custom speed multiplier.

```typescript
import { BarLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function ProgressBar() {
  const override: CSSProperties = {
    display: "block",
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 9999,
  };

  return (
    <BarLoader
      color="#4CAF50"
      loading={true}
      cssOverride={override}
      height={3}
      width="100%"
      speedMultiplier={1.5}
      aria-label="Loading progress"
    />
  );
}
```

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

### Basic Usage Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ScaleLoader.md

A typical implementation of ScaleLoader within a React component, demonstrating how to set custom colors and dimensions for the loading bars.

```typescript
import { ScaleLoader } from 'react-spinners';

function FileProcessing() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <ScaleLoader
        color="#4CAF50"
        loading={true}
        height={40}
        width={5}
        radius={3}
        margin={3}
      />
    </div>
  );
}
```

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

### Clone the Repository

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Fork the repository and clone it locally to start contributing. Replace 'your-username' with your GitHub username.

```bash
git clone git@github.com:your-username/react-spinners.git
```

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

### Responsive CircleLoader Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/CircleLoader.md

Shows how to make the CircleLoader responsive by adjusting its size based on window width. It uses the `useState` and `useEffect` hooks to manage the size and listen for window resize events.

```typescript
import { CircleLoader } from 'react-spinners';
import { useEffect, useState } from 'react';

function ResponsiveCircleLoader() {
  const [size, setSize] = useState(50);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setSize(35);
      } else if (window.innerWidth < 1024) {
        setSize(50);
      } else {
        setSize(70);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <CircleLoader
      color="#4ECDC4"
      loading={true}
      size={size}
    />
  );
}
```

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

### Responsive RingLoader Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/RingLoader.md

Demonstrates how to dynamically adjust the size of the RingLoader based on window width. This snippet uses React hooks to manage state and listen for resize events.

```typescript
import { RingLoader } from 'react-spinners';
import { useEffect, useState } from 'react';

function ResponsiveRingLoader() {
  const [size, setSize] = useState(60);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setSize(40);
      } else if (window.innerWidth < 1024) {
        setSize(60);
      } else {
        setSize(80);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <RingLoader
      color="#4ECDC4"
      loading={true}
      size={size}
    />
  );
}

```

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

### Basic PuffLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/PuffLoader.md

A basic example demonstrating how to use the PuffLoader component with custom color and size. Ensure the component is wrapped in a container for proper centering.

```typescript
import { PuffLoader } from 'react-spinners';

function DataLoading() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <PuffLoader
        color="#FF6B6B"
        loading={true}
        size={80}
      />
    </div>
  );
}
```

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

### Basic FadeLoader Usage Example

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/FadeLoader.md

Demonstrates how to use the FadeLoader component with custom color, size, and margin props. Ensure the component is wrapped in a container that allows for centering if needed.

```typescript
import { FadeLoader } from 'react-spinners';

function AsyncDataLoader() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <FadeLoader
        color="#FF6B6B"
        loading={true}
        height={20}
        width={8}
        radius={3}
        margin={3}
      />
    </div>
  );
}
```

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

### Basic CircleLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/CircleLoader.md

A basic example demonstrating how to render the CircleLoader component with custom color and size. Ensure the component is wrapped in a container with appropriate styling for centering if needed.

```typescript
import { CircleLoader } from 'react-spinners';

function LoadingScreen() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '60px' }}>
      <CircleLoader
        color="#3498db"
        loading={true}
        size={70}
      />
    </div>
  );
}
```

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

### Basic RingLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/RingLoader.md

A basic example demonstrating how to use the RingLoader component with custom color and size. Ensure the component is wrapped in a container for proper centering.

```typescript
import { RingLoader } from 'react-spinners';

function LoadingDisplay() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <RingLoader
        color="#3498db"
        loading={true}
        size={80}
      />
    </div>
  );
}
```

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

### ClipLoader with named colors

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Examples of using supported named colors for the 'color' prop. Note that 'lightgray' is not supported.

```typescript
<ClipLoader color="red" />
<ClipLoader color="navy" />
<ClipLoader color="lightgray" />  // Not supported; use hex or rgb
```

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

### ClipLoader with hex color formats

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Examples of using 6-digit and 3-digit hex color codes for the 'color' prop.

```typescript
<ClipLoader color="#FF0000" />      // 6-digit hex
<ClipLoader color="#F00" />         // 3-digit hex (expands to #FF0000)
```

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

### Controlled PuffLoader with Speed and Size Adjustment

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/PuffLoader.md

An advanced example showing how to control the loading state, speed, and size of the PuffLoader using React state and input elements. This allows for dynamic adjustments to the spinner's behavior.

```typescript
import { PuffLoader } from 'react-spinners';
import { useState } from 'react';

function ControlledPuffLoader() {
  const [loading, setLoading] = useState(true);
  const [speed, setSpeed] = useState(1);
  const [size, setSize] = useState(60);

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <button onClick={() => setLoading(!loading)}>
          {loading ? 'Stop' : 'Start'} Loading
        </button>
        
        <label>
          Size: 
          <input 
            type="range" 
            min="30" 
            max="120" 
            value={size}
            onChange={(e) => setSize(Number(e.target.value))}
          />
        </label>
        
        <label>
          Speed: 
          <input 
            type="range" 
            min="0.5" 
            max="2"
            step="0.1"
            value={speed}
            onChange={(e) => setSpeed(Number(e.target.value))}
          />
        </label>
      </div>

      <PuffLoader
        color="#3498db"
        loading={loading}
        size={size}
        speedMultiplier={speed}
        aria-label="Loading"
      />
    </div>
  );
}
```

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

### Dynamic ScaleLoader with Custom Bar Count and Speed

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ScaleLoader.md

An advanced example showcasing a dynamic ScaleLoader where the number of bars and animation speed can be adjusted in real-time using state and input range elements.

```typescript
import { ScaleLoader } from 'react-spinners';
import { useState } from 'react';

function DynamicScaleLoader() {
  const [barCount, setBarCount] = useState(5);
  const [speed, setSpeed] = useState(1);

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Bar Count: 
          <input 
            type="range" 
            min="3" 
            max="12" 
            value={barCount}
            onChange={(e) => setBarCount(Number(e.target.value))}
          />
          <span>{barCount}</span>
        </label>
        
        <label>
          Speed: 
          <input 
            type="range" 
            min="0.5" 
            max="2" 
            step="0.1"
            value={speed}
            onChange={(e) => setSpeed(Number(e.target.value))}
          />
        </label>
      </div>

      <ScaleLoader
        color="#FF9800"
        loading={true}
        height={35}
        width={4}
        radius={2}
        margin={2}
        barCount={barCount}
        speedMultiplier={speed}
      />
    </div>
  );
}
```

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

### Advanced RingLoader with Animation Control

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/RingLoader.md

An advanced example showing how to control the loading state and animation speed of the RingLoader using React state and event handlers.

```typescript
import { RingLoader } from 'react-spinners';
import { useState } from 'react';

function ControlledRingLoader() {
  const [loading, setLoading] = useState(true);
  const [speed, setSpeed] = useState(1);

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <button onClick={() => setLoading(!loading)}>
          {loading ? 'Stop' : 'Start'}
        </button>
        
        <label>
          Speed: 
          <input 
            type="range" 
            min="0.5" 
            max="2" 
            step="0.1"
            value={speed}
            onChange={(e) => setSpeed(Number(e.target.value))}
          />
        </label>
      </div>

      <RingLoader
        color="#FF9800"
        loading={loading}
        size={100}
        speedMultiplier={speed}
        aria-label="Loading"
      />
    </div>
  );
}
```

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

### FadeLoader with Dynamic Size Based on Screen Width

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/FadeLoader.md

This example shows how to dynamically adjust the FadeLoader's size (height, width, margin) based on the screen width, making it responsive. It uses the useState and useEffect hooks to track window size changes.

```typescript
import { FadeLoader } from 'react-spinners';
import { useState } from 'react';

function ResponsiveFadeLoader() {
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);

  const handleResize = () => {
    setIsMobile(window.innerWidth < 768);
  };

  React.useEffect(() => {
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <FadeLoader
      color="#4ECDC4"
      loading={true}
      height={isMobile ? 10 : 15}
      width={isMobile ? 4 : 5}
      radius={2}
      margin={isMobile ? 1 : 2}
      speedMultiplier={1.1}
    />
  );
}
```

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

### Custom FadeLoader with Styling

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/FadeLoader.md

Demonstrates how to use the FadeLoader component with custom CSS overrides for advanced styling, including background color, padding, and box shadow. Ensure the 'react-spinners' and 'react' libraries are installed.

```typescript
import { FadeLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function CustomFadeLoader() {
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
    backgroundColor: "white",
    borderRadius: "8px",
    padding: "30px",
    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
  };

  return (
    <FadeLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      height={18}
      width={6}
      radius={3}
      margin={4}
      speedMultiplier={0.9}
      aria-label="Loading"
    />
  );
}
```

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

### CircleLoader with Speed and State Control

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/CircleLoader.md

An advanced example showing how to control the CircleLoader's speed and loading state dynamically using React hooks. This allows for interactive adjustments to the spinner's animation.

```typescript
import { CircleLoader } from 'react-spinners';
import { useState } from 'react';

function AdjustableCircleLoader() {
  const [speed, setSpeed] = useState(1);
  const [size, setSize] = useState(50);
  const [loading, setLoading] = useState(true);

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Speed: 
          <input 
            type="range"
            min="0.5"
            max="2"
            step="0.1"
            value={speed}
            onChange={(e) => setSpeed(Number(e.target.value))}
          />
          <span>{speed.toFixed(1)}x</span>
        </label>
      </div>

      <button onClick={() => setLoading(!loading)}>
        {loading ? 'Stop' : 'Start'}
      </button>

      <CircleLoader
        color="#FF9800"
        loading={loading}
        size={size}
        speedMultiplier={speed}
      />
    </div>
  );
}
```

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

### Customized RingLoader Styling

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/RingLoader.md

An example of how to apply custom CSS styles to the RingLoader using the 'cssOverride' prop. This allows for significant visual modifications beyond the default appearance.

```typescript
import { RingLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function StyledRingLoader() {
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
    backgroundColor: "rgba(255, 255, 255, 0.8)",
    borderRadius: "50%",
    padding: "40px",
  };

  return (
    <RingLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      size={100}
      speedMultiplier={1.2}
      aria-label="Loading"
    />
  );
}
```

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

### Configurable GridLoader with State

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/GridLoader.md

Shows an advanced example of GridLoader where its size, margin, and color can be dynamically changed using React state and input elements. This allows for interactive customization of the spinner's appearance.

```typescript
import { GridLoader } from 'react-spinners';
import { useState } from 'react';

function ConfigurableGridLoader() {
  const [size, setSize] = useState(15);
  const [margin, setMargin] = useState(2);
  const [color, setColor] = useState("#3498db");

  return (
    <div>
      <div style={{ marginBottom: '20px' }}>
        <label>
          Size: 
          <input 
            type="range" 
            min="8" 
            max="30" 
            value={size}
            onChange={(e) => setSize(Number(e.target.value))}
          />
        </label>
        
        <label>
          Margin: 
          <input 
            type="range" 
            min="1" 
            max="10" 
            value={margin}
            onChange={(e) => setMargin(Number(e.target.value))}
          />
        </label>
        
        <label>
          Color: 
          <input 
            type="color" 
            value={color}
            onChange={(e) => setColor(e.target.value)}
          />
        </label>
      </div>

      <GridLoader
        color={color}
        loading={true}
        size={size}
        margin={margin}
        speedMultiplier={1.1}
      />
    </div>
  );
}
```

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

### Build Demo Site

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Build the demo site after making changes to loaders or the demo interface. This command ensures the demo accurately reflects your modifications.

```bash
npm run build:demo
```

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

### Project File Structure

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/MANIFEST.md

This tree shows the organization of the generated documentation files for the react-spinners library.

```bash
output/
├── README.md                          [Orientation guide - start here]
├── MANIFEST.md                        [This file]
├── API_INDEX.md                       [Master index and quick reference]
├── types.md                           [Type definitions and interfaces]
├── configuration.md                   [Props and configuration options]
└── api-reference/
    ├── Helpers.md                     [Helper utility functions]
    ├── BarLoader.md                   [Horizontal progress bar]
    ├── BeatLoader.md                  [Three pulsing dots]
    ├── BounceLoader.md                [Two bouncing circles]
    ├── CircleLoader.md                [Five concentric rings]
    ├── ClipLoader.md                  [Rotating circle with scaling]
    ├── FadeLoader.md                  [Eight fading bars in circle]
    ├── GridLoader.md                  [3×3 grid of animated dots]
    ├── PuffLoader.md                  [Two puffing circles]
    ├── RingLoader.md                  [Two 3D rotating rings]
    ├── ScaleLoader.md                 [Multiple scaling bars]
    └── OtherLoaders.md                [13 additional loader components]
```

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

### Use Flexbox for Spinner Container

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Arrange the spinner within a flexbox container to center it both horizontally and vertically. This example makes the container fill the viewport height.

```typescript
const override = {
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  height: "100vh",
};
```

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

### Component Usage with Props

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/README.md

Demonstrates how to use a loader component with common props like loading, color, and size. Ensure you have the necessary types imported.

```typescript
import { ClipLoader, LoaderSizeProps } from 'react-spinners';

const props: LoaderSizeProps = {
  loading: true,
  color: "#FF0000",
  size: 50,
};

<ClipLoader {...props} />
```

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

### Add Background Container with CSS Override

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Style a background container for the spinner using CSS overrides. This example adds a white background, padding, and rounded corners.

```typescript
const override = {
  backgroundColor: "white",
  padding: "20px",
  borderRadius: "8px",
  boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
};
```

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

### Responsive BarLoader with Dynamic Width

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BarLoader.md

Illustrates how to make the BarLoader responsive by dynamically adjusting its width based on window size. This ensures the loader fits well across different screen dimensions.

```typescript
import { BarLoader } from 'react-spinners';
import { useEffect, useState } from 'react';

function ResponsiveBar() {
  const [barWidth, setBarWidth] = useState("100%");

  useEffect(() => {
    const handleResize = () => {
      const isMobile = window.innerWidth < 768;
      setBarWidth(isMobile ? "100%" : "80%");
    };
    
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <BarLoader
      color="#FF9800"
      loading={true}
      width={barWidth}
      height={6}
      speedMultiplier={1.2}
    />
  );
}
```

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

### Basic Usage of ClipLoader

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/README.md

Demonstrates how to import and use the ClipLoader component with basic props like color, loading state, and size.

```typescript
import { ClipLoader } from 'react-spinners';

function Loading() {
  return <ClipLoader color="#36d7b7" loading={true} size={50} />;
}
```

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

### Basic GridLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/GridLoader.md

Demonstrates how to use the GridLoader component with custom color, size, and margin. Ensure the component is wrapped in a container that allows for centering if needed.

```typescript
import { GridLoader } from 'react-spinners';

function DataLoadingScreen() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <GridLoader
        color="#4ECDC4"
        loading={true}
        size={20}
        margin={4}
      />
    </div>
  );
}
```

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

### Basic BeatLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BeatLoader.md

Demonstrates a simple implementation of the BeatLoader component with custom color, loading state, size, and margin.

```typescript
import { BeatLoader } from 'react-spinners';

function LoadingMessage() {
  return (
    <div>
      <p>Processing your request</p>
      <BeatLoader 
        color="#3498db" 
        loading={true}
        size={20}
        margin={4}
      />
    </div>
  );
}
```

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

### Development Build Commands

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/API_INDEX.md

Commands for building and developing the react-spinners project. Includes commands for development server, CJS build, ESM build, and Storybook.

```bash
# Development
npm run dev

# Build CJS
npm run build

# Build ESM
npm run build:esm

# Storybook documentation
npm run storybook
```

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

### Stage and Commit Changes

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Stage all changes and commit them with a descriptive message. This prepares your changes for pushing to the remote repository.

```bash
git add -A;
git commit -m 'Awesome new feature';
```

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

### Basic BounceLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BounceLoader.md

Demonstrates how to use the BounceLoader component with basic props like color, loading state, and size. This is suitable for general loading indicators.

```typescript
import { BounceLoader } from 'react-spinners';

function LoadingSpinner() {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', padding: '40px' }}>
      <BounceLoader
        color="#FF6B6B"
        loading={true}
        size={80}
      />
    </div>
  );
}
```

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

### Making ScaleLoader Responsive

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ScaleLoader.md

Shows how to make the ScaleLoader responsive to different screen sizes by dynamically adjusting its configuration (height, width, bar count) based on window width. This ensures the loader looks good on both small and large displays.

```typescript
import {
  ScaleLoader
} from 'react-spinners';
import { useEffect, useState } from 'react';

function ResponsiveScaleLoader() {
  const [config, setConfig] = useState({
    height: 35,
    width: 4,
    barCount: 5,
  });

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setConfig({ height: 20, width: 3, barCount: 3 });
      } else if (window.innerWidth < 1024) {
        setConfig({ height: 30, width: 4, barCount: 5 });
      } else {
        setConfig({ height: 40, width: 5, barCount: 7 });
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <ScaleLoader
      color="#9B59B6"
      loading={true}
      height={config.height}
      width={config.width}
      radius={2}
      margin={2}
      barCount={config.barCount}
    />
  );
}
```

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

### Run Tests and Lints

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Ensure code quality by running the necessary tests and linters. Fix any errors reported by these commands before proceeding.

```bash
npm run lint;
npm run test:jest;
```

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

### Using calculateRgba for Backgrounds

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/Helpers.md

Demonstrates using calculateRgba to generate a background color with a specified opacity, useful for creating semi-transparent elements.

```typescript
const backgroundColor = calculateRgba(color, 0.2);  // 20% opacity

const wrapper = {
  backgroundColor: backgroundColor,  // Semi-transparent background
  color: color,                       // Full opacity foreground
};
```

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

### ClipLoader with RGB and RGBA color formats

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Demonstrates using standard RGB, RGBA with decimal opacity, and modern CSS syntax for the 'color' prop.

```typescript
// Standard RGB format
<ClipLoader color="rgb(255, 0, 0)" />

// RGBA with decimal opacity
<ClipLoader color="rgba(255, 0, 0, 0.8)" />

// Modern CSS syntax with forward slash
<ClipLoader color="rgb(255 0 0 / 80%)" />

// Numeric opacity in RGBA
<ClipLoader color="rgba(255, 0, 0, 0.8)" />
```

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

### BarLoader with custom height and width

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Shows how to set custom 'height' and 'width' for the BarLoader component.

```typescript
<BarLoader height={8} width="100%" />
```

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

### Watch for Changes

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Use webpack to continuously watch for changes and update the bundle file. This is useful during development to see your changes reflected quickly.

```bash
npm run watch
```

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

### Responsive PuffLoader based on Window Size

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/PuffLoader.md

Shows how to make the PuffLoader responsive by dynamically adjusting its size based on the browser window's width. It uses `useState` and `useEffect` to manage size changes on window resize events.

```typescript
import { PuffLoader } from 'react-spinners';
import { useEffect, useState } from 'react';

function ResponsivePuffLoader() {
  const [size, setSize] = useState(60);

  useEffect(() => {
    const handleResize = () => {
      if (window.innerWidth < 640) {
        setSize(40);
      } else if (window.innerWidth < 1024) {
        setSize(60);
      } else {
        setSize(80);
      }
    };

    window.addEventListener('resize', handleResize);
    handleResize();
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <PuffLoader
      color="#4ECDC4"
      loading={true}
      size={size}
      speedMultiplier={1.1}
    />
  );
}
```

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

### Basic Usage with Functional Component

Source: https://github.com/davidhu2000/react-spinners/blob/main/README.md

Demonstrates how to use ClipLoader in a React functional component, managing loading state and color via useState.

```tsx
import { useState, CSSProperties } from "react";
import { ClipLoader } from "react-spinners";

const override: CSSProperties = {
  display: "block",
  margin: "0 auto",
  borderColor: "red",
};

function App() {
  let [loading, setLoading] = useState(true);
  let [color, setColor] = useState("#ffffff");

  return (
    <div className="sweet-loading">
      <button onClick={() => setLoading(!loading)}>Toggle Loader</button>
      <input
        value={color}
        onChange={(input) => setColor(input.target.value)}
        placeholder="Color of the loader"
      />

      <ClipLoader
        color={color}
        loading={loading}
        cssOverride={override}
        size={150}
        aria-label="Loading Spinner"
        data-testid="loader"
      />
    </div>
  );
}

export default App;
```

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

### Basic BarLoader Usage

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BarLoader.md

Demonstrates a basic implementation of the BarLoader component with custom color, height, and width. This is useful for standard loading indicators within your application.

```typescript
import { BarLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function FileUploadProgress() {
  return (
    <div style={{ padding: '20px' }}>
      <p>Uploading file...</p>
      <BarLoader
        color="#4CAF50"
        loading={true}
        height={8}
        width="100%"
        speedMultiplier={1}
      />
    </div>
  );
}
```

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

### Advanced ClipLoader with Color and Size Customization

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ClipLoader.md

Shows how to dynamically customize the color and size of the ClipLoader using input elements.

```typescript
import { ClipLoader } from 'react-spinners';
import { useState } from 'react';

function CustomClipLoader() {
  const [color, setColor] = useState("#FF5733");
  const [size, setSize] = useState(60);
  
  return (
    <div>
      <input 
        type="color" 
        value={color} 
        onChange={(e) => setColor(e.target.value)}
      />
      <input 
        type="range" 
        min="20" 
        max="150" 
        value={size}
        onChange={(e) => setSize(Number(e.target.value))}
      />
      
      <ClipLoader 
        loading={true} 
        color={color} 
        size={size}
        data-testid="clip-loader"
      />
    </div>
  );
}
```

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

### Using createAnimation in Loaders

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/Helpers.md

Shows how to use the createAnimation helper to define CSS keyframe animations for loaders, specifying the animation name, keyframes, and a fallback name.

```typescript
const fadeAnimation = createAnimation(
  "FadeLoader",
  "50% {opacity: 0.3} 100% {opacity: 1}",
  "fade"
);

const style = {
  animation: `${fadeAnimation} 1.2s infinite`,
};
```

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

### Universal Props for All Loaders

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/API_INDEX.md

Demonstrates the common props that can be applied to any loader component. These include loading state, color, speed multiplier, and CSS overrides.

```typescript
<AnyLoader
  loading={true}           // boolean, default: true
  color="#FF0000"          // string (hex, rgb, rgba, or named color)
  speedMultiplier={1}      // number, default: 1
  cssOverride={{}}         // React.CSSProperties
  // Plus all standard HTML span attributes
  data-testid="loader"
  aria-label="Loading"
  className="my-loader"
/>
```

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

### BeatLoader with custom size and margin

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Illustrates customizing the 'size' and 'margin' props for the BeatLoader component.

```typescript
<BeatLoader size={20} margin={4} />
```

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

### Full Width BarLoader with State Management

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BarLoader.md

Shows how to use BarLoader to create a full-width progress bar at the top of the page, controlled by component state. This is ideal for indicating global loading states or page transitions.

```typescript
import { BarLoader } from 'react-spinners';
import { CSSProperties, useState } from 'react';

function TopProgressBar() {
  const [loading, setLoading] = useState(false);
  
  const override: CSSProperties = {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 9999,
  };

  return (
    <>
      <button onClick={() => setLoading(!loading)}>
        {loading ? 'Done' : 'Start Loading'}
      </button>
      
      <BarLoader
        color="#2196F3"
        loading={loading}
        cssOverride={override}
        height={3}
        width="100%"
        aria-label="Loading progress"
      />
      
      <div style={{ padding: '20px' }}>
        <p>Page content here...</p>
      </div>
    </>
  );
}
```

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

### Custom PuffLoader with CSS Overrides

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/PuffLoader.md

Demonstrates how to customize the PuffLoader's appearance using the `cssOverride` prop. This includes setting display, margin, background color, border radius, and padding.

```typescript
import { PuffLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function StyledPuffLoader() {
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
    backgroundColor: "rgba(0, 0, 0, 0.05)",
    borderRadius: "50%",
    padding: "30px",
  };

  return (
    <PuffLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      size={100}
      speedMultiplier={0.9}
      aria-label="Loading"
    />
  );
}
```

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

### FadeLoader with full dimensional control

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Demonstrates setting 'height', 'width', 'radius', and 'margin' for the FadeLoader component.

```typescript
<FadeLoader 
  height={20} 
  width={8} 
  radius={4} 
  margin={3} 
/>
```

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

### Customizing BounceLoader Styles

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BounceLoader.md

Illustrates how to apply custom CSS styles to the BounceLoader using the `cssOverride` prop. This allows for detailed visual adjustments beyond basic props.

```typescript
import { BounceLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function CustomBounceLoader() {
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
    backgroundColor: "rgba(0, 0, 0, 0.05)",
    borderRadius: "10px",
    padding: "20px",
  };

  return (
    <BounceLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      size={100}
      speedMultiplier={0.9}
    />
  );
}
```

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

### BeatLoader with CSS Overrides

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BeatLoader.md

Illustrates how to apply custom CSS styles to the BeatLoader component using the `cssOverride` prop for layout and alignment.

```typescript
import { BeatLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function CustomBeatLoader() {
  const override: CSSProperties = {
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    padding: "20px",
  };

  return (
    <BeatLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      size={25}
      margin={8}
      speedMultiplier={0.8}
      aria-label="Loading"
    />
  );
}
```

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

### Memoizing Loader Styles with useMemo

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Optimize component rendering by memoizing style overrides for ClipLoader using the `useMemo` hook. This prevents unnecessary re-creation of the style object on every render.

```typescript
import { useMemo } from 'react';
import { ClipLoader } from 'react-spinners';

function OptimizedLoader({ loading, color }) {
  const override = useMemo(() => ({
    display: "block",
    margin: "0 auto",
  }), []);

  return <ClipLoader loading={loading} color={color} cssOverride={override} />;
}
```

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

### ClipLoader with size in pixels and rem

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Demonstrates using the 'size' prop with both numeric (pixels) and string (rem) values for ClipLoader.

```typescript
<ClipLoader size={50} />  // 50px diameter
<ClipLoader size="2rem" /> // 2rem diameter
```

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

### Create a New Branch

Source: https://github.com/davidhu2000/react-spinners/blob/main/CONTRIBUTING.md

Create a new branch for your feature or bug fix. This helps keep your changes organized.

```bash
git checkout -b awesome-feature
```

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

### Importing a Component

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/INDEX.txt

Standard import pattern for any component from the react-spinners library.

```javascript
import { ComponentName } from 'react-spinners';
```

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

### BounceLoader with State Transitions

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BounceLoader.md

Shows how to control the loading state and size of the BounceLoader dynamically using React state. This allows for interactive loading indicators.

```typescript
import { BounceLoader } from 'react-spinners';
import { useState } from 'react';

function LoadingWithState() {
  const [isLoading, setIsLoading] = useState(true);
  const [size, setSize] = useState(60);

  const handleToggle = () => {
    setIsLoading(!isLoading);
    setSize(isLoading ? 40 : 60);
  };

  return (
    <>
      <button onClick={handleToggle}>
        {isLoading ? 'Stop Loading' : 'Start Loading'}
      </button>
      
      <BounceLoader
        color="#3498db"
        loading={isLoading}
        size={size}
        speedMultiplier={1.2}
        aria-label="Loading indicator"
        data-testid="bounce-loader"
      />
    </>
  );
}
```

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

### CircleLoader Ring Sizing Formula

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/CircleLoader.md

Illustrates the formula used to calculate the size of each of the five concentric rings based on the 'size' prop and the ring's index. This ensures a consistent decrease in size for inner rings.

```typescript
const { value, unit } = parseLengthAndUnit(size);

// Ring i dimensions:
const ringSize = `${value * (1 - i / 10)}${unit}`;
```

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

### Client-Side Hydration with ClipLoader

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

This snippet demonstrates how to safely use ClipLoader in components that are hydrated on the client. Ensure to use the 'use client' directive in Next.js for correct hydration.

```typescript
import { ClipLoader } from 'react-spinners';

export default function ClientComponent() {
  return <ClipLoader loading={true} />;
}
```

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

### Conditional Rendering with Loading Prop

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/README.md

Shows how to conditionally render a loader based on a loading state. The loader returns null when loading is false.

```typescript
<ClipLoader loading={isLoading} />  // Hidden when isLoading is false
```

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

### ClipLoader and FadeLoader with numeric size/dimension values

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/configuration.md

Illustrates how numeric values for 'size', 'height', and 'width' props are interpreted as pixels.

```typescript
<ClipLoader size={50} />           // Interpreted as 50px
<FadeLoader height={15} width={5} /> // 15px and 5px
```

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

### Import BeatLoader

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BeatLoader.md

Import the BeatLoader component from the react-spinners library.

```typescript
import { BeatLoader } from 'react-spinners';
```

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

### createAnimation

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/Helpers.md

Creates and injects CSS keyframe animations into the document head. It is server-safe and can be used in SSR/Node.js environments.

```APIDOC
## createAnimation

### Description
Creates and injects CSS keyframe animations into the document head. It is server-safe and can be used in SSR/Node.js environments.

### Function Signature
```typescript
function createAnimation(loaderName: string, frames: string, suffix: string): string
```

### Parameters
#### Parameters
- **loaderName** (string) - Required - Name of the loader (e.g., "ClipLoader", "BarLoader")
- **frames** (string) - Required - CSS keyframe rules as a string (e.g., "0% {...} 50% {...} 100% {...}")
- **suffix** (string) - Required - Suffix to append to animation name for uniqueness (e.g., "clip", "bounce")

### Returns
`string` — The generated animation name in format `react-spinners-{loaderName}-{suffix}`

### Behavior
- In browser environment: Creates a `<style>` element, appends to document head, injects keyframes
- In server environment (no window.document): Returns animation name without DOM manipulation
- Server-safe for SSR/Node.js environments

### Usage Example
```typescript
const clipAnimation = createAnimation(
  "ClipLoader",
  "0% {transform: rotate(0deg) scale(1)} 50% {transform: rotate(180deg) scale(0.8)} 100% {transform: rotate(360deg) scale(1)}",
  "clip"
);
// Returns: "react-spinners-ClipLoader-clip"

// Animation is injected as:
// @keyframes react-spinners-ClipLoader-clip {
//   0% {transform: rotate(0deg) scale(1)}
//   50% {transform: rotate(180deg) scale(0.8)}
//   100% {transform: rotate(360deg) scale(1)}
// }
```
```

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

### Custom Styling CircleLoader

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/CircleLoader.md

Demonstrates how to apply custom CSS styles to the CircleLoader component using the `cssOverride` prop. This allows for detailed control over the loader's appearance, such as background, padding, and border-radius.

```typescript
import { CircleLoader } from 'react-spinners';
import { CSSProperties } from 'react';

function StyledCircleLoader() {
  const override: CSSProperties = {
    display: "block",
    margin: "0 auto",
    backgroundColor: "rgba(255, 255, 255, 0.8)",
    borderRadius: "50%",
    padding: "30px",
  };

  return (
    <CircleLoader
      color="#9B59B6"
      loading={true}
      cssOverride={override}
      size={80}
      speedMultiplier={0.8}
      aria-label="Loading"
    />
  );
}
```

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

### PuffLoader Size Variations

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/PuffLoader.md

Illustrates different ways to set the size of the PuffLoader component, from small mobile sizes to large desktop sizes, including custom CSS units.

```typescript
// Small loader (mobile)
<PuffLoader size={40} />

// Medium loader (default)
<PuffLoader size={60} />

// Large loader (desktop)
<PuffLoader size={100} />

// Custom unit
<PuffLoader size="5rem" />
```

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

### BeatLoader with Dynamic Color

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/BeatLoader.md

Shows how to dynamically change the BeatLoader's color using React state and effects, cycling through a predefined array of colors.

```typescript
import { BeatLoader } from 'react-spinners';
import { useState, useEffect } from 'react';

function MultiColorBeatLoader() {
  const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1'];
  const [colorIndex, setColorIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setColorIndex((prev) => (prev + 1) % colors.length);
    }, 3000);
    
    return () => clearInterval(interval);
  }, []);

  return (
    <BeatLoader
      color={colors[colorIndex] כמו}
      loading={true}
      size={12}
      margin={3}
      speedMultiplier={1.5}
    />
  );
}
```

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

### Using parseLengthAndUnit for Calculations

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/Helpers.md

Illustrates using parseLengthAndUnit to extract numeric values and units for performing calculations to derive component dimensions or layout properties.

```typescript
const { value, unit } = parseLengthAndUnit(size);

// Calculate derived dimensions
const moonSize = Math.round(value / 7);  // e.g., 60 / 7 = 8.57 → 9
const diameter = `${value + moonSize * 2}${unit}`;  // e.g., "76px"

// Create grid dimensions
const width = parseFloat(value.toString()) * 3 + margin * 6;
```

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

### ScaleLoader with Default Props

Source: https://github.com/davidhu2000/react-spinners/blob/main/_autodocs/api-reference/ScaleLoader.md

Render the ScaleLoader with its default configuration. The component will be visible by default.

```typescript
<ScaleLoader />
```