mhnpd/react-loader-spinner

README

React Loader Spinner

Simple, lightweight React SVG spinner components
Perfect for async operations and loading states

📚 Documentation • 🎨 Live Demo • 💻 CodeSandbox

✨ Features

🎯 35+ Beautiful Spinners - Wide variety of loading animations
🎨 Fully Customizable - Colors, sizes, and styles
📦 Lightweight - Zero dependencies (except React)
🌲 Tree-shakeable - Import only what you need
💪 TypeScript - Full type definitions included
⚡ React 17, 18 & 19 - Compatible with all modern React versions
🎭 No CSS Required - Pure SVG animations
♿ Accessible - ARIA labels and semantic HTML

📦 Installation

npm install react-loader-spinner

Or using yarn:

yarn add react-loader-spinner

🚀 Quick Start

import { Audio } from 'react-loader-spinner'

function App() {
  return (
    <Audio
      height="80"
      width="80"
      color="#4fa94d"
      ariaLabel="audio-loading"
      wrapperStyle={{}}
      wrapperClass="wrapper-class"
      visible={true}
    />
  )
}

📖 Documentation

Visit our complete documentation for:

Getting Started Guide - Installation and basic usage
All Components - Browse all 35+ spinner components
API Reference - Detailed prop documentation
Live Examples - Interactive demos

🎨 Available Spinners

View all 35+ spinners

Audio
Ball Triangle
Bars
Blocks
Circles
Circles With Bar
Circular Progress
Color Ring
Comment
Discuss
DNA
Falling Lines
Fidget Spinner
Grid
Hearts
Hourglass
Infinity Spin
Line Wave
Magnifying Glass
Mutating Dots
Oval
Progress Bar
Puff
Radio
Revolving Dot
Rings
Rotating Lines
Rotating Square
Rotating Triangles
Tail Spin
Three Circles
Three Dots
Triangle
Vortex
Watch

💡 Usage Examples

Basic Usage

import { Oval } from 'react-loader-spinner'
;<Oval
  height={80}
  width={80}
  color="#4fa94d"
  visible={true}
  ariaLabel="oval-loading"
  secondaryColor="#4fa94d"
  strokeWidth={2}
  strokeWidthSecondary={2}
/>

With Custom Styling

import { ThreeDots } from 'react-loader-spinner'
;<ThreeDots
  height="80"
  width="80"
  radius="9"
  color="#4fa94d"
  ariaLabel="three-dots-loading"
  wrapperStyle={{ margin: '20px' }}
  wrapperClass="custom-loader"
  visible={true}
/>

Conditional Rendering

import { TailSpin } from 'react-loader-spinner'

function MyComponent() {
  const [loading, setLoading] = useState(true)

  return (
    <div>
      <TailSpin
        height="80"
        width="80"
        color="#4fa94d"
        ariaLabel="tail-spin-loading"
        visible={loading}
      />
    </div>
  )
}

Tree-shaking with Direct Imports

For optimal bundle size, import components directly:

// Direct import (better for tree-shaking)
import { Audio } from 'react-loader-spinner/dist/esm/loader/audio'

// Or use named imports (also tree-shakeable)
import { Audio, Oval, ThreeDots } from 'react-loader-spinner'

🎯 Common Props

All spinner components accept these common props:

Prop	Type	Default	Description
`height`	`string \| number`	`"100"`	Height of the spinner
`width`	`string \| number`	`"100"`	Width of the spinner
`color`	`string`	`"#4fa94d"`	Primary color
`visible`	`boolean`	`true`	Show/hide the spinner
`ariaLabel`	`string`	Component-specific	Accessibility label
`wrapperStyle`	`CSSProperties`	`{}`	Inline styles for wrapper
`wrapperClass`	`string`	`""`	CSS class for wrapper

Note: Individual components may have additional specific props. Check the documentation for each component.

🔧 TypeScript Support

This package includes TypeScript definitions out of the box:

import { Audio } from 'react-loader-spinner'
import type { CSSProperties } from 'react'

const wrapperStyle: CSSProperties = {
  display: 'flex',
  justifyContent: 'center',
}

;<Audio height="80" width="80" color="blue" wrapperStyle={wrapperStyle} />

🌐 Browser Support

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Modern mobile browsers

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📝 License

MIT © Mohan Upadhyay

🙏 Contributors

Thanks goes to these wonderful people:

🔗 Links

Made with ❤️ by Mohan Upadhyay

⭐ Star us on GitHub — it helps!