react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
npm install react-loader-spinner
Simple, lightweight React SVG spinner components
Perfect for async operations and loading states
---
- 🎯 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
``bash`
npm install react-loader-spinner
Or using yarn:
`bash`
yarn add react-loader-spinner
`jsx
import { Audio } from 'react-loader-spinner'
function App() {
return (
height="80"
width="80"
color="#4fa94d"
ariaLabel="audio-loading"
wrapperStyle={{}}
wrapperClass="wrapper-class"
visible={true}
/>
)
}
`
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
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
`jsx`
import { Oval } from 'react-loader-spinner'
;
width={80}
color="#4fa94d"
visible={true}
ariaLabel="oval-loading"
secondaryColor="#4fa94d"
strokeWidth={2}
strokeWidthSecondary={2}
/>
`jsx`
import { ThreeDots } from 'react-loader-spinner'
;
width="80"
radius="9"
color="#4fa94d"
ariaLabel="three-dots-loading"
wrapperStyle={{ margin: '20px' }}
wrapperClass="custom-loader"
visible={true}
/>
`jsx
import { TailSpin } from 'react-loader-spinner'
function MyComponent() {
const [loading, setLoading] = useState(true)
return (
$3
For optimal bundle size, import components directly:
`jsx
// 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:
`tsx
import { Audio } from 'react-loader-spinner'
import type { CSSProperties } from 'react'const wrapperStyle: CSSProperties = {
display: 'flex',
justifyContent: 'center',
}
;
`🌐 Browser Support
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Modern mobile browsers
🤝 Contributing
We welcome contributions! Please see our Contributing Guide for details.
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)MIT © Mohan Upadhyay
Thanks goes to these wonderful people:
- 📚 Full Documentation
- 🐛 Report Bug
- 💡 Request Feature
- 📦 npm Package
---