> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.

# Pulsating Dots Loader

> Five dots that pulse in and out in a sequential wave pattern

The Pulsating Dots Loader displays five dots that scale from 0 to full size in a smooth, sequential wave pattern. This elegant loader creates a rhythmic pulsing effect perfect for modern interfaces.

## Installation

```bash theme={null}
npm install @craftdotui/loaders
```

## Usage

<CodeGroup>
  ```tsx Basic Usage theme={null}
  import PulsingDots from "@craftdotui/loaders/pulsating-dots";

  export default function App() {
    return <PulsingDots />;
  }
  ```

  ```tsx In a Container theme={null}
  import PulsingDots from "@craftdotui/loaders/pulsating-dots";

  export default function LoadingState() {
    return (
      <div className="flex items-center justify-center p-8">
        <PulsingDots />
      </div>
    );
  }
  ```

  ```tsx With Message theme={null}
  import PulsingDots from "@craftdotui/loaders/pulsating-dots";

  export default function LoadingView() {
    return (
      <div className="flex flex-col items-center gap-4">
        <PulsingDots />
        <p className="text-sm text-muted-foreground">Loading...</p>
      </div>
    );
  }
  ```
</CodeGroup>

## Props

The Pulsating Dots component does not accept any props. It displays five dots with a fixed pulsing animation.

## Animation Details

* **Dots**: 5 circular dots
* **Size**: 10.32px per dot
* **Animation**: Scale from 0 to 1 and back
* **Duration**: 1.3 seconds per cycle
* **Delay**: Sequential wave pattern (-0.25 fraction between dots)
* **Easing**: Ease-in-out
* **Color**: Black in light mode, white in dark mode

## Examples

### Loading Section

```tsx theme={null}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Card } from "@/components/ui/card";

export default function LoadingSection() {
  return (
    <Card className="p-12">
      <div className="flex flex-col items-center gap-4">
        <h3 className="text-lg font-semibold">Loading Content</h3>
        <PulsingDots />
      </div>
    </Card>
  );
}
```

### Inline Loading

```tsx theme={null}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";

export default function InlineLoader({ isLoading, children }) {
  if (isLoading) {
    return (
      <div className="flex items-center justify-center h-32">
        <PulsingDots />
      </div>
    );
  }
  
  return children;
}
```

### Full Page Loader

```tsx theme={null}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";

export default function FullPageLoader() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm">
      <div className="flex flex-col items-center gap-6">
        <PulsingDots />
        <div className="text-center space-y-1">
          <p className="font-medium">Loading Application</p>
          <p className="text-sm text-muted-foreground">Please wait...</p>
        </div>
      </div>
    </div>
  );
}
```

### Data Fetching

```tsx theme={null}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";

export default function DataFetcher({ isLoading, data }) {
  if (isLoading) {
    return (
      <div className="border rounded-lg p-12">
        <div className="flex flex-col items-center gap-4">
          <PulsingDots />
          <p className="text-sm text-muted-foreground">Fetching data...</p>
        </div>
      </div>
    );
  }
  
  return <div>{data}</div>;
}
```

### Button Loading

```tsx theme={null}
import PulsingDots from "@craftdotui/loaders/pulsating-dots";
import { Button } from "@/components/ui/button";

export default function LoadingButton({ isLoading, onClick, children }) {
  return (
    <div className="space-y-3">
      <Button onClick={onClick} disabled={isLoading} className="w-full">
        {children}
      </Button>
      {isLoading && (
        <div className="flex justify-center">
          <PulsingDots />
        </div>
      )}
    </div>
  );
}
```