mhnpd/react-loader-spinner

mhnpd/react-loader-spinner has 1,039 GitHub stars and 150 forks. GitHot measured -1 stars in 24 hours and -1 in 7 days. Last checked 2026-11-12 08:23 UTC. Last push 2026-01-14.

Cómo se miden estas cifras

Collection sets of a spinners for async operations for ReactJS

1,039 estrellas 150 forks

What you can do

🎯 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

Crecimiento de estrellas medido

in 24h: -1
in 7 days: -1
in 15 days: Recopilando historial
in 1 month: Recopilando historial

Cambios netos en períodos que se solapan, no totales diarios. Los datos no disponibles se dejan en blanco. Las estrellas indican interés, no calidad.

README.md

Original

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} />