react-logo-loader

A customizable React loading spinner library with 20+ animated SVG logo loaders. Pass your own SVG logo and choose from a wide range of animation styles.

Installation

npm install react-logo-loader

Quick Start

import { ArcSpinner } from "react-logo-loader";

const MyLogo = () => (
  <svg viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 2L2 7l10 5 10-5-10-5z" />
  </svg>
);

export default function App() {
  return (
    <ArcSpinner
      size={64}
      color="#6366f1"
      speed="normal"
      logoBehavior="pulse"
      logo={<MyLogo />}
    />
  );
}

Components

| Component | Description | |---|---| | ArcSpinner | Single spinning arc around the logo | | DualSpinner | Two opposite arcs spinning together | | DualArc | Two arcs spinning in opposite directions | | CrossArc | Inner and outer arcs crossing each other | | ArcOrbit | SVG track with rotating colored arc segment | | ElasticArc | Arc that stretches and shrinks as it spins | FadedArc | Spinning arc with a fading comet tail | | ElasticArcOrbit | ElasticArc style with a static background track | | DualArcOrbit | Two opposite arcs spinning on a track | | RippleRings | Four expanding ripple rings | | DoubleRing | Two staggered expanding rings | | RadarPing | Radar ping expanding from center | | PulseRing | Pulsing disc with radiating ring | | HelixDots | Logo with flanking helix dots | | OrbitDots | Dots orbiting around the logo | | HelixOrbit | Dots arranged in a ring pulsing in helix wave | | DotOrbit | Dots arranged in circle rotating clockwise | | ZigZagOrbit | Zigzag circular path rotating around logo | | SpinLogo | Logo spinning 360° continuously | | PulseLogo | Logo pulsing continuously | | BounceLoop | Squash and stretch bounce | | BlurPulse | Cinematic blur in and out | | StrokeDraw | Circle drawing around the logo | | GlitchWave | Cyberpunk left and right glitch split | | FlipCard | 3D card flip animation | | SpinTracks | Rounded track segments spinning clockwise |

Props

Base props — available on all components

| Prop | Type | Default | Description | |---|---|---|---| | size | number \| string | 48 | Width and height e.g. 64 or "4rem" | | color | string | "#6366f1" | Primary animation color | | speed | "slow" \| "normal" \| "fast" | "normal" | Animation speed | | speedMultiplier | number | — | Fine-grained speed control e.g. 1.5 | | logoScale | number | 0.7 | Logo size as fraction of size e.g. 0.8 for 80% | | strokeWidth | "thin" \| "normal" \| "thick" \| "bold" | "normal" | Arc and track thickness | | ariaLabel | string | "Loading" | Screen reader label | | className | string | "" | Custom CSS class | | logo | ReactNode | — | Your SVG logo |

logoBehavior prop

Available on most components:

| Value | Description | |---|---| | "pulse" | Logo scales up and down | | "blur" | Logo blurs in and out | | "bounce" | Logo hops up and down | | "none" | Logo stays still |

dotsSpeed prop

Available on: HelixDots, OrbitDots, HelixOrbit

<HelixDots speed="fast" dotsSpeed="slow" logo={<MyLogo />} />

trackColor prop — ArcOrbit, ElasticArcOrbit, DualArcOrbit only

<ArcOrbit color="#6366f1" trackColor="#e0e7ff" logo={<MyLogo />} />

Examples

// Arc spinner with blur logo behavior
<ArcSpinner size={64} color="#6366f1" logoBehavior="blur" logo={<MyLogo />} />

// Helix dots with independent speeds
<HelixDots size={64} color="#ec4899" speed="fast" dotsSpeed="slow" logoBehavior="pulse" logo={<MyLogo />} />

// Radar ping with bounce logo
<RadarPing size={64} color="#22d3ee" logoBehavior="bounce" logo={<MyLogo />} />

// GoDaddy-style arc orbit with track
<ArcOrbit size={80} color="#0d9488" trackColor="#ccfbf1" logoBehavior="blur" logo={<MyLogo />} />

// Simple spin — no decorations
<SpinLogo size={48} color="#6366f1" speed="fast" logo={<MyLogo />} />

Accessibility

Every component ships with:

• role="status" for screen reader announcements
• aria-label defaulting to "Loading" — customizable via prop
• prefers-reduced-motion support — animations collapse gracefully
• Zero layout shift — explicit width and height on every wrapper

License

MIT