Specialty Spinners

/**
 * Iconic Pacman animation eating dots
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function PacmanLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { PacmanLoader } from "react-spinners";

// Classic Pacman animation
<PacmanLoader loading={isLoading} color="#ffff00" />

// Gaming theme with custom styling
<PacmanLoader
  loading={true}
  color="#ffd700"
  size={35}
  cssOverride={{
    filter: "drop-shadow(2px 2px 4px rgba(0,0,0,0.3))",
  }}
/>

// Large Pacman for loading screens
<PacmanLoader
  loading={true}
  color="#ff6b6b"
  size={50}
  margin={4}
/>

/**
 * Animated boxes climbing over each other
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function ClimbingBoxLoader(props: LoaderSizeProps): JSX.Element | null;

import { ClimbingBoxLoader } from "react-spinners";

// Climbing boxes animation
<ClimbingBoxLoader loading={isBuilding} color="#28a745" />

// Construction theme
<ClimbingBoxLoader
  loading={true}
  color="#fd7e14"
  size={20}
  cssOverride={{
    transform: "scale(1.2)",
  }}
/>

// Slow climbing animation
<ClimbingBoxLoader
  loading={true}
  color="#6c757d"
  size={18}
  speedMultiplier={0.7}
/>

/**
 * Grid of squares with wave-like animation
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function GridLoader(props: LoaderSizeProps): JSX.Element | null;

import { GridLoader } from "react-spinners";

// Grid wave animation
<GridLoader loading={isProcessing} color="#007bff" />

// Large grid for dashboards
<GridLoader
  loading={true}
  color="#17a2b8"
  size={20}
  cssOverride={{
    display: "block",
    margin: "20px auto",
  }}
/>

// Fast grid animation
<GridLoader
  loading={true}
  color="#e83e8c"
  size={12}
  speedMultiplier={1.5}
/>

/**
 * Wave propagation effect with expanding circles
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function PropagateLoader(props: LoaderSizeProps): JSX.Element | null;

import { PropagateLoader } from "react-spinners";

// Wave propagation
<PropagateLoader loading={isConnecting} color="#20c997" />

// Network communication theme
<PropagateLoader
  loading={true}
  color="#0d6efd"
  size={18}
  cssOverride={{
    opacity: 0.8,
  }}
/>

// Slow wave propagation
<PropagateLoader
  loading={true}
  color="#6610f2"
  size={20}
  speedMultiplier={0.6}
/>

/**
 * Configurable number of scaling bars like an audio equalizer
 * @param props - ScaleLoaderProps with height, width, radius, margin, and barCount
 * @returns JSX.Element | null - Returns null when loading is false
 */
function ScaleLoader(props: ScaleLoaderProps): JSX.Element | null;

interface ScaleLoaderProps extends LoaderHeightWidthRadiusProps {
  /** Number of bars to display */
  barCount?: number;
}

import { ScaleLoader } from "react-spinners";

// Audio equalizer style
<ScaleLoader loading={isPlaying} color="#1db954" />

// More bars for richer animation
<ScaleLoader
  loading={true}
  color="#ff6b6b"
  barCount={8}
  height={40}
  width={5}
/>

// Thin bars with tight spacing
<ScaleLoader
  loading={true}
  color="#007bff"
  barCount={12}
  height={30}
  width={2}
  margin={1}
  cssOverride={{
    filter: "blur(0.5px)",
  }}
/>

// Wide bars for bold effect
<ScaleLoader
  loading={true}
  color="#28a745"
  barCount={3}
  height={50}
  width={10}
  margin={5}
  radius={5}
/>

<div className="game-loading">
  <PacmanLoader loading={isLoadingLevel} color="#ffff00" size={40} />
  <p>Loading next level...</p>
</div>

<div className="build-progress">
  <ClimbingBoxLoader loading={isBuilding} color="#fd7e14" size={18} />
  <span>Building your project...</span>
</div>

<div className="data-processing">
  <GridLoader loading={isAnalyzing} color="#6610f2" size={16} />
  <p>Analyzing data patterns...</p>
</div>

// Music player loading
<div className="music-loading">
  <ScaleLoader
    loading={isBuffering}
    color="#1ed760"
    barCount={10}
    height={25}
    width={3}
    margin={1}
  />
  <span>Buffering audio...</span>
</div>

// Audio processing
<ScaleLoader
  loading={isProcessingAudio}
  color="#ff6b6b"
  barCount={16}
  height={35}
  width={2}
  speedMultiplier={1.5}
/>

<div className="network-status">
  <PropagateLoader loading={isConnecting} color="#17a2b8" size={16} />
  <span>Connecting to server...</span>
</div>

const brandColors = {
  primary: "#007bff",
  secondary: "#6c757d",
  success: "#28a745",
  warning: "#ffc107",
};

<ScaleLoader
  loading={true}
  color={brandColors.primary}
  barCount={6}
  cssOverride={{
    filter: `hue-rotate(${themeHue}deg)`,
  }}
/>

function LoadingSpinner({ operation, ...props }) {
  switch (operation) {
    case "gaming":
      return <PacmanLoader {...props} color="#ffff00" />;
    case "building":
      return <ClimbingBoxLoader {...props} color="#fd7e14" />;
    case "audio":
      return <ScaleLoader {...props} barCount={8} color="#1ed760" />;
    case "data":
      return <GridLoader {...props} color="#6610f2" />;
    case "network":
      return <PropagateLoader {...props} color="#17a2b8" />;
    default:
      return <GridLoader {...props} />;
  }
}

<LoadingSpinner operation="audio" loading={isProcessing} />

// Instead of importing all specialty spinners
import { PacmanLoader, ScaleLoader } from "react-spinners";

// Import only what you need
import PacmanLoader from "react-spinners/PacmanLoader";
import ScaleLoader from "react-spinners/ScaleLoader";