Circular Spinners

/**
 * Clipped circle spinner with rotating arc animation
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function ClipLoader(props: LoaderSizeProps): JSX.Element | null;

import { ClipLoader } from "react-spinners";

// Basic usage
<ClipLoader loading={isLoading} color="#36d7b7" />

// Custom size and styling
<ClipLoader
  loading={true}
  color="#ff6b6b"
  size={60}
  cssOverride={{
    display: "block",
    margin: "0 auto",
  }}
/>

// Button spinner
<button disabled={submitting}>
  {submitting ? (
    <ClipLoader loading={true} size={16} color="#ffffff" />
  ) : (
    "Submit"
  )}
</button>

/**
 * Full circle spinner with rotating border animation
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function CircleLoader(props: LoaderSizeProps): JSX.Element | null;

import { CircleLoader } from "react-spinners";

// Default usage
<CircleLoader loading={isLoading} />

// Large circle with custom color
<CircleLoader
  loading={true}
  color="#007bff"
  size={80}
  cssOverride={{ margin: "20px auto" }}
/>

/**
 * Clock-like spinner with rotating hand animation
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function ClockLoader(props: LoaderSizeProps): JSX.Element | null;

import { ClockLoader } from "react-spinners";

// Clock spinner for time-related operations
<ClockLoader loading={isProcessing} color="#28a745" size={40} />

// Slow clock animation
<ClockLoader
  loading={true}
  color="#6f42c1"
  size={70}
  speedMultiplier={0.5}
/>

/**
 * Bouncing circle animation with scale transformation
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function BounceLoader(props: LoaderSizeProps): JSX.Element | null;

import { BounceLoader } from "react-spinners";

// Fun bouncing animation
<BounceLoader loading={isLoading} color="#ff9800" />

// Large bounce with custom styling
<BounceLoader
  loading={true}
  color="#e91e63"
  size={100}
  cssOverride={{
    display: "block",
    margin: "0 auto",
    borderColor: "red",
  }}
/>

/**
 * Puffing circle animation that scales in and out
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function PuffLoader(props: LoaderSizeProps): JSX.Element | null;

import { PuffLoader } from "react-spinners";

// Puffing animation
<PuffLoader loading={isUploading} color="#17a2b8" />

// Faster puff animation
<PuffLoader
  loading={true}
  color="#fd7e14"
  size={80}
  speedMultiplier={1.5}
/>

/**
 * Rotating square spinner
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function SquareLoader(props: LoaderSizeProps): JSX.Element | null;

import { SquareLoader } from "react-spinners";

// Square spinner
<SquareLoader loading={isProcessing} color="#20c997" />

// Large square with slow rotation
<SquareLoader
  loading={true}
  color="#6610f2"
  size={75}
  speedMultiplier={0.7}
/>

/**
 * Skewed rectangle with rotation animation
 * @param props - LoaderSizeProps with optional size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function SkewLoader(props: LoaderSizeProps): JSX.Element | null;

import { SkewLoader } from "react-spinners";

// Skewed spinner (note smaller default size)
<SkewLoader loading={isLoading} color="#dc3545" />

// Larger skewed spinner
<SkewLoader
  loading={true}
  color="#343a40"
  size={35}
  cssOverride={{ transform: "scale(1.2)" }}
/>

/**
 * Two overlapping rings with 3D rotation animations creating a complex spinning effect
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function RingLoader(props: LoaderSizeProps): JSX.Element | null;

import { RingLoader } from "react-spinners";

// 3D ring animation
<RingLoader loading={isLoading} color="#dc3545" />

// Large ring with custom styling
<RingLoader
  loading={true}
  color="#198754"
  size={80}
  cssOverride={{
    transform: "scale(1.1)",
  }}
/>

// Slow ring rotation
<RingLoader
  loading={true}
  color="#6610f2"
  size={70}
  speedMultiplier={0.7}
/>

/**
 * A circular loader with a small moon orbiting around a ring
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function MoonLoader(props: LoaderSizeProps): JSX.Element | null;

import { MoonLoader } from "react-spinners";

// Moon orbiting animation
<MoonLoader loading={isLoading} color="#007bff" />

// Large moon loader
<MoonLoader
  loading={true}
  color="#6f42c1"
  size={80}
  cssOverride={{
    display: "block",
    margin: "0 auto",
  }}
/>

// Fast moon orbit
<MoonLoader
  loading={true}
  color="#dc3545"
  size={50}
  speedMultiplier={1.5}
/>

/**
 * A hash-shaped loader with expanding and contracting animation
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function HashLoader(props: LoaderSizeProps): JSX.Element | null;

import { HashLoader } from "react-spinners";

// Hash animation
<HashLoader loading={isLoading} color="#28a745" />

// Large hash with custom styling
<HashLoader
  loading={true}
  color="#fd7e14"
  size={70}
  cssOverride={{
    filter: "drop-shadow(0 0 5px rgba(0,0,0,0.3))",
  }}
/>

// Slower hash animation
<HashLoader
  loading={true}
  color="#20c997"
  size={60}
  speedMultiplier={0.8}
/>

/**
 * A rotating spinner with multiple dots around a circle
 * @param props - LoaderSizeProps with size configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function DotLoader(props: LoaderSizeProps): JSX.Element | null;

import { DotLoader } from "react-spinners";

// Rotating dots animation
<DotLoader loading={isLoading} color="#007bff" />

// Large dot circle
<DotLoader
  loading={true}
  color="#28a745"
  size={80}
  cssOverride={{
    display: "block",
    margin: "0 auto",
  }}
/>

// Fast rotation
<DotLoader
  loading={true}
  color="#dc3545"
  size={50}
  speedMultiplier={1.5}
/>

// Spinner only shows when loading
{isLoading && <ClipLoader color="#36d7b7" />}

// Or use the loading prop
<ClipLoader loading={isLoading} color="#36d7b7" />

<CircleLoader
  size="3rem"
  cssOverride={{
    fontSize: "clamp(16px, 4vw, 24px)",
  }}
/>

<ClipLoader
  loading={true}
  color="#007bff"
  aria-label="Loading content"
  role="status"
  aria-live="polite"
/>