Spinners React

9 awesome typescript-aware lightweight spinners built as react.js components.

Demo

View demo with examples of react.js component usage.

Getting started

Installation

$ npm install spinners-react

or add it directly to HTML page

Usage

import { SpinnerCircular } from 'spinners-react';

Hide spinner

List of components

Component	Example	Component	Example	Component	Example
SpinnerCircular		SpinnerCircularFixed		SpinnerCircularSplit
SpinnerRound		SpinnerRoundOutlined		SpinnerRoundFilled
SpinnerDotted		SpinnerInfinity		SpinnerDiamond

Properties

The following optional properties are available. All extra props will be passed to the component's root SVG element.

Server Side Rendering

While the library works with SSR, the spinner's animation CSS will be attached to the head only on the hydrate phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:

/* App.css */

/* to load animation for a specific spinner */
@import "~spinners-react/lib/SpinnerCircular.css";

/* to load animations for all spinners at once */
@import "~spinners-react/lib/index.css";

Minimizing Bundle Size

The library is thin and do not rely on any style library / runtime to be used. To reduce the bundle size even more load only the used components. If you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:

import { SpinnerCircular } from 'spinners-react';

If that's not the case you're able to use path imports to avoid pulling in unused spinners:

// ESM
import { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';
// or CJS
const { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');
// or UMD
const { SpinnerCircular } = require('spinners-react/lib/cjs/SpinnerCircular');

UMD bundle usage

  
    
    
    
    
    
    
  

  
    <div id="root"></div>
    
  

Browsers support

Firefox	Chrome	Safari	Opera	Edge
last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions*

* - Legacy EdgeHTML Edge (i.e. 42-44) is also supported except for SpinnerRound and SpinnerRoundOutlined.

Issues and Bugs

Let us know if you found a bug!

Spinners for other frameworks

• spinners-angular

Support and Contact

Have a quick question or need some help? Please do not hesitate to contact us via email at info@adexin.com.

Credits

This component is developed by consulting agency Adexin.

License

Spinners React is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.