react-loader-collection

Lightweight collection of accessible SVG loaders for React applications.

Features

• Six production-ready loader components (Spinner, Dots, Pulse, Ring, Bars, Wave)
• Customisable size, color, duration, plus full SVG prop passthrough
• Tree-shakable exports with both ESM and CJS bundles
• Zero runtime dependencies beyond React

Installation

npm install react-loader-collection
# or
yarn add react-loader-collection

Make sure react and react-dom are already installed in your project (they are peer dependencies).

Usage

import { Spinner, Dots, Pulse } from 'react-loader-collection';

export function ExampleLoaders() {
  return (
    <div style={{ display: 'flex', gap: 24 }}>
      <Spinner size={48} color="#2563eb" />
      <Dots size={64} color="#f97316" duration={0.9} />
      <Pulse size={72} color="#10b981" />
    </div>
  );
}

Props

All loaders share the same prop signature:

| Prop | Type | Default | Notes | | ----------- | ------- | ----------- | --------------------------------------------- | | size | number | component-specific | Controls rendered width/height | | color | string | component-specific | Any valid CSS color | | duration | number | component-specific | Animation duration in seconds | | ariaLabel | string | "Loading …" | Accessible label for assistive tech | | className | string | undefined | Pass-through to <svg> | | style | object | undefined | Inline styles for <svg> | | ...rest | SVG props | — | Any other valid SVGSVGElement prop |

Development

npm install
npm run dev   # watch mode
npm run build # output to dist/

License

MIT © kawsarahmed