react-loader-animate

A collection of 92+ animated loading components built with React, TypeScript, and Tailwind CSS — lightweight, tree-shakable, and fully customizable.

---

✨ Features

• 🎨 92+ loader animations — spin, pulse, wave, orbit, DNA, hourglass, and more
• 📐 3 built-in sizes — sm, md, lg
• 🎭 4 colour variants — primary, accent, success, warning
• 🖌️ Full customisation — color, height, width, animationDuration, strokeWidth, colors[]
• ♿ Accessible — role="status", aria-label, visible prop for screen-reader-friendly hiding
• ⚡ Performance-first — every component wrapped in React.memo, zero runtime dependencies
• 🌗 Dark mode — CSS custom properties, works with any theming strategy
• 🌲 Tree-shakable — import only what you use; unused loaders are eliminated at build time
• 🔧 TypeScript — complete type definitions included

---

📦 Installation

# npm
npm install react-loader-animate

# pnpm
pnpm add react-loader-animate

# yarn
yarn add react-loader-animate

Peer dependencies: react >= 17, react-dom >= 17

---

🚀 Quick Start

Option 1 — Pre-built CSS

// main.tsx / _app.tsx
import 'react-loader-animate/dist/index.css';

Option 2 — Tailwind CSS preset (recommended)

// tailwind.config.ts
import loaderPreset from 'react-loader-animate/tailwind.preset';

export default {
  presets: [loaderPreset],
  content: [
    './src/**/*.{ts,tsx}',
    'node_modules/react-loader-animate/dist/**/*.{js,mjs}',
  ],
};

Use a component

import { SpinLoader, DotsLoader, GradientSpinner } from 'react-loader-animate';

export default function App() {
  return (
    <div>
      <SpinLoader />
      <SpinLoader size="lg" variant="accent" />
      <SpinLoader color="#6366f1" animationDuration={0.6} />
    </div>
  );
}

---

🎛️ Props

All components share a common LoaderProps interface:

Prop	Type	Default	Description
size	'sm' | 'md' | 'lg'	'md'	Preset size
variant	'primary' | 'accent' | 'success' | 'warning'	'primary'	Colour theme token
color	string	—	Custom CSS colour (overrides variant)
height	number | string	—	Custom height in px or CSS string
width	number | string	—	Custom width in px or CSS string
className	string	—	Extra class(es) on the root element
ariaLabel	string	'loading'	Accessible label for screen readers
wrapperStyle	CSSProperties	—	Inline styles on the wrapper
wrapperClass	string	—	Extra class(es) on the wrapper
visible	boolean	true	Set to false to hide (returns null)
strokeWidth	number	4	SVG stroke width (SVG-based loaders)
animationDuration	number	1	Animation speed in seconds
colors	string[]	—	Custom colour array (e.g. ColorRingLoader)

---

🧩 Component Catalogue

Basic & Spinner

SpinLoader · DotsLoader · PulseLoader · WaveLoader · GradientSpinner · RingLoader · BarLoader · TypingDotsLoader · SyncLoader · BarsLoader · RotatingLoader

Shapes

SquareLoader · TriangleLoader · DiamondLoader · CrossLoader · HexagonLoader · PentagonLoader · StarLoader · ArrowLoader · ChevronLoader · PyramidLoader · CubeLoader

Motion & Physics

FlipLoader · OrbitLoader · ButterflyLoader · SegmentLoader · SpiralLoader · GridLoader · Grid3x3Loader · BounceBallLoader · ClockLoader · DNALoader · HeartbeatLoader · InfinityLoader · GearLoader · HourglassLoader · RadarLoader · PendulumLoader · AtomLoader

Advanced / Multi-colour

ColorRingLoader · CircularProgressLoader · TailSpinLoader · BallTriangleLoader · HashLoader · MutatingDotsLoader · ThreeDotsFadeLoader

Split & Transform

CornerSquaresLoader · SquareSplitLoader · TriangleSplitLoader · CircleSplitLoader · DiamondSplitLoader · HexagonSplitLoader

---

💡 Usage Examples

// Custom colour
<SpinLoader color="#f43f5e" size="lg" />

// Custom size override
<RingLoader height={80} width={80} strokeWidth={6} />

// Controlled visibility
<DotsLoader visible={isLoading} />

// Multi-colour ring
<ColorRingLoader colors={['#e15b64', '#f47e60', '#f8b26a', '#abbd81', '#849b87']} />

// Slow down animation
<PulseLoader animationDuration={2} variant="success" />

// Wrapper customisation
<SpinLoader wrapperClass="flex items-center justify-center" wrapperStyle={{ minHeight: 200 }} />

---

🌗 Dark Mode

The library uses CSS custom properties for colour tokens. Add the following variables to your global CSS:

:root {
  --primary:   262 80% 60%;
  --accent:    25 95% 53%;
  --success:   142 71% 45%;
  --warning:   38 92% 50%;
}

.dark {
  --primary:   262 80% 65%;
  --accent:    25 95% 58%;
  --success:   142 71% 50%;
  --warning:   38 92% 55%;
}

---

📖 Documentation

Live demo and full API reference: react-loader-animate docs

---

🤝 Contributing

Contributions, issues, and feature requests are welcome! Please open an issue or submit a pull request on GitHub.

---

📄 License

MIT © danhnhdeveloper308