Loading Animation

Create a smooth, minimalist loading animation component with the following characteristics:

## Requirements:
- Animated dots/circles that pulse in sequence
- Multiple animation variations (dots, spinner, wave, bars)
- Smooth easing animations
- Customizable speed and color
- Responsive design
- Dark theme with adjustable colors
- Multiple dot count options
- Smooth timing for synchronized animations

## Component Props:
- variant: 'dots' | 'spinner' | 'wave' | 'bars' (default: 'dots')
- speed: ...

'use client'

import React from 'react'

type LoadingVariant = 'dots' | 'spinner' | 'wave' | 'bars'
type Size = 'sm' | 'md' | 'lg'

interface LoadingAnimationProps {
  variant?: LoadingVariant
  speed?: number
  color?: string
  size?: Size
  dotCount?: number
}

export default function LoadingAnimation({
  variant = 'dots',
  speed = 1200,
  color = 'black',
  size = 'md',
  dotCount = 3,
}: LoadingAnimationProps) {
  const sizeMap = {
    sm: { dot: 2, container: 'w-6 h-6' },
    md: { dot: 3,...

# Loading Animation Component - Documentation

## What is this?
A smooth, minimalist loading animation component with multiple animation styles (dots, spinner, wave, bars). Perfect for loading states and data fetching indicators.

## Installation

1. Copy the component code to your project: `components/LoadingAnimation.tsx`
2. Import it in your page:

```typescript
import LoadingAnimation from '@/components/LoadingAnimation'
```

3. Use it:

```typescript
<LoadingAnimation />
```

## How to Use
...