https://github.com/mhnpd/react-loader-spinner
Collection sets of a spinners for async operations for ReactJS
https://github.com/mhnpd/react-loader-spinner
loader react react-component react-spinners spinner spinner-animations spinner-components spinner-hint spinner-icon spinners spinners-react svg-loader svg-spinner
Last synced: about 2 months ago
JSON representation
Collection sets of a spinners for async operations for ReactJS
- Host: GitHub
- URL: https://github.com/mhnpd/react-loader-spinner
- Owner: mhnpd
- License: mit
- Created: 2017-11-27T07:42:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-04T14:40:09.000Z (almost 2 years ago)
- Last Synced: 2024-05-22T01:42:39.067Z (almost 2 years ago)
- Topics: loader, react, react-component, react-spinners, spinner, spinner-animations, spinner-components, spinner-hint, spinner-icon, spinners, spinners-react, svg-loader, svg-spinner
- Language: TypeScript
- Homepage: https://mhnpd.github.io/react-loader-spinner/
- Size: 6.44 MB
- Stars: 940
- Watchers: 9
- Forks: 142
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- Contributing: Contributing.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-loader-spinner - Collection set of react-spinner for async operation. (UI Components / Loader)
- fucking-awesome-react-components - react-loader-spinner - Collection set of react-spinner for async operation. (UI Components / Loader)
- awesome-react-components - react-loader-spinner - Collection set of react-spinner for async operation. (UI Components / Loader)
- awesome - mhnpd/react-loader-spinner - Collection sets of a spinners for async operations for ReactJS (TypeScript)
README
# React Loader Spinner
[](https://www.npmjs.com/package/react-loader-spinner)
[](https://www.npmjs.com/package/react-loader-spinner)
**Simple, lightweight React SVG spinner components**
Perfect for async operations and loading states
[📚 Documentation](https://mhnpd.github.io/react-loader-spinner/) • [🎨 Live Demo](https://mhnpd.github.io/react-loader-spinner/docs/category/components/) • [💻 CodeSandbox](https://codesandbox.io/p/sandbox/react-loader-spinner-86zm9s)
---
## ✨ 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
```bash
npm install react-loader-spinner
```
Or using yarn:
```bash
yarn add react-loader-spinner
```
## 🚀 Quick Start
```jsx
import { Audio } from 'react-loader-spinner'
function App() {
return (
)
}
```
## 📖 Documentation
Visit our **[complete documentation](https://mhnpd.github.io/react-loader-spinner/)** for:
- **[Getting Started Guide](https://mhnpd.github.io/react-loader-spinner/docs/intro)** - Installation and basic usage
- **[All Components](https://mhnpd.github.io/react-loader-spinner/docs/category/components/)** - Browse all 35+ spinner components
- **[API Reference](https://mhnpd.github.io/react-loader-spinner/docs/intro)** - Detailed prop documentation
- **[Live Examples](https://mhnpd.github.io/react-loader-spinner/docs/category/components/)** - 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
```jsx
import { Oval } from 'react-loader-spinner'
;
```
### With Custom Styling
```jsx
import { ThreeDots } from 'react-loader-spinner'
;
```
### Conditional Rendering
```jsx
import { TailSpin } from 'react-loader-spinner'
function MyComponent() {
const [loading, setLoading] = useState(true)
return (
)
}
```
### Tree-shaking with Direct Imports
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](https://mhnpd.github.io/react-loader-spinner/docs/category/components/) 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](./Contributing.md) 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`)
5. Open a Pull Request
## 📝 License
MIT © [Mohan Upadhyay](https://mohanpd.com.np)
## 🙏 Contributors
Thanks goes to these wonderful people:
## 🔗 Links
- [📚 Full Documentation](https://mhnpd.github.io/react-loader-spinner/)
- [🐛 Report Bug](https://github.com/mhnpd/react-loader-spinner/issues)
- [💡 Request Feature](https://github.com/mhnpd/react-loader-spinner/issues)
- [📦 npm Package](https://www.npmjs.com/package/react-loader-spinner)
---