react-loader-spinner

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

• 📚 Full Documentation
• 🐛 Report Bug
• 💡 Request Feature
• 📦 npm Package

Made with ❤️ by Mohan Upadhyay

⭐ Star us on GitHub — it helps!

Similar packages

Other packages similar to react-loader-spinner

react-spinners

The react-spinners package provides a collection of loading spinner components for React, similar to react-loader-spinner. It offers a variety of spinner types and customization options. Compared to react-loader-spinner, react-spinners has a more extensive collection of spinner types and is widely used in the React community.

react-loading

The react-loading package offers a set of simple loading animations for React applications. It is lightweight and easy to use, making it a good alternative to react-loader-spinner for projects that require basic loading indicators without extensive customization.

react-content-loader

The react-content-loader package allows you to create SVG loading placeholders that mimic the content being loaded. This package is particularly useful for creating skeleton screens, providing a different approach to loading indicators compared to react-loader-spinner.