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
PulseRing	Pulsing disc with radiating ring
ShimmerScan	Diagonal light sweep over logo
FloodFill	Logo fills from bottom to top
ArcSpinner	Single spinning arc around logo
DualSpinner	Two opposite arcs spinning together
DualArc	Two arcs spinning in opposite directions
CrossArc	Inner + outer arcs crossing
ArcOrbit	SVG track with rotating colored arc segment
RippleRings	Four expanding ripple rings
DoubleRing	Two staggered expanding rings
RadarPing	Radar ping expanding from center
HelixDots	Logo with flanking helix dots
OrbitDots	Dots orbiting around logo
StrokeDraw	Circle drawing around logo
GlitchWave	Cyberpunk left/right glitch split
FlipCard	3D card flip animation
BounceLoop	Squash and stretch bounce
BlurPulse	Cinematic blur in/out
SpinLogo	Logo spinning 360° continuously
PulseLogo	Logo pulsing continuously

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
ariaLabel	string	"Loading"	Screen reader label
className	string	""	Custom CSS class
logo	ReactNode	—	Your SVG logo

logoBehavior prop — controls logo animation

Available on: ArcSpinner, DualSpinner, DualArc, CrossArc, ArcOrbit, RippleRings, DoubleRing, RadarPing, StrokeDraw, HelixDots, OrbitDots

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 — independent dot/orbit speed

Available on: HelixDots, OrbitDots

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

shimmerColor prop — ShimmerScan only

<ShimmerScan shimmerColor="rgba(255,255,255,0.7)" logo={<MyLogo />} />

trackColor prop — ArcOrbit and FloodFill

<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