Dot and Beat Spinners

/**
 * Multiple dots that pulse in sequence creating a heartbeat effect
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function BeatLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { BeatLoader } from "react-spinners";

// Basic beat animation
<BeatLoader loading={isLoading} color="#36d7b7" />

// Larger dots with more spacing
<BeatLoader
  loading={true}
  color="#007bff"
  size={20}
  margin={5}
/>

// Inline loading text
<p>
  Loading data
  <BeatLoader loading={true} size={8} margin={1} color="#666" />
</p>

// Fast beat animation
<BeatLoader
  loading={true}
  color="#28a745"
  speedMultiplier={2}
  cssOverride={{ display: "inline-block" }}
/>

/**
 * A row of dots that pulse simultaneously
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function PulseLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { PulseLoader } from "react-spinners";

// Synchronized pulse
<PulseLoader loading={isSubmitting} color="#dc3545" />

// Small inline pulse
<PulseLoader
  loading={true}
  color="#6c757d"
  size={10}
  margin={3}
  cssOverride={{ verticalAlign: "middle" }}
/>

// Large pulse with custom spacing
<PulseLoader
  loading={true}
  color="#17a2b8"
  size={25}
  margin={8}
/>

/**
 * Dots that bounce up and down in synchronization
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function SyncLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { SyncLoader } from "react-spinners";

// Synchronized bouncing
<SyncLoader loading={isProcessing} color="#fd7e14" />

// Tight spacing
<SyncLoader
  loading={true}
  color="#e83e8c"
  size={12}
  margin={1}
/>

// Slow synchronized animation
<SyncLoader
  loading={true}
  color="#20c997"
  size={18}
  speedMultiplier={0.6}
/>

/**
 * Dots that rise and fall in a wave pattern
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function RiseLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { RiseLoader } from "react-spinners";

// Wave-like rising animation
<RiseLoader loading={isUploading} color="#6610f2" />

// Compact rise animation
<RiseLoader
  loading={true}
  color="#495057"
  size={10}
  margin={1}
/>

/**
 * Small lines that rotate around a central point
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function RotateLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { RotateLoader } from "react-spinners";

// Rotating lines
<RotateLoader loading={isLoading} color="#007bff" />

// Faster rotation
<RotateLoader
  loading={true}
  color="#28a745"
  speedMultiplier={1.8}
  size={20}
/>

/**
 * A 3x3 grid of squares that scale and fade in sequence
 * @param props - LoaderSizeMarginProps with size and margin configuration
 * @returns JSX.Element | null - Returns null when loading is false
 */
function GridLoader(props: LoaderSizeMarginProps): JSX.Element | null;

import { GridLoader } from "react-spinners";

// Grid animation
<GridLoader loading={isProcessing} color="#6f42c1" />

// Larger grid for loading screens
<GridLoader
  loading={true}
  color="#198754"
  size={20}
  margin={4}
  cssOverride={{
    display: "block",
    margin: "0 auto",
  }}
/>

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

<span>
  Saving changes
  <BeatLoader loading={isSaving} size={8} margin={2} color="#666" />
</span>

<button disabled={submitting}>
  {submitting ? (
    <>
      <PulseLoader loading={true} size={8} color="#ffffff" />
      <span style={{ marginLeft: 8 }}>Submitting...</span>
    </>
  ) : (
    "Submit Form"
  )}
</button>

const theme = {
  primary: "#007bff",
  success: "#28a745",
  warning: "#ffc107",
  danger: "#dc3545",
};

<BeatLoader loading={true} color={theme.primary} />

<SyncLoader
  size={16}
  margin="0.5rem"
  cssOverride={{
    margin: "clamp(8px, 2vw, 16px)",
  }}
/>