react-spinners

What is react-spinners?

The react-spinners npm package provides a collection of loading spinner components for React applications. These spinners are customizable and can be used to indicate loading states in your application.

What are react-spinners's main functionalities?

ClipLoader

The ClipLoader is a simple circular spinner. You can customize its color, loading state, and size.

import { ClipLoader } from 'react-spinners';

function App() {
  return (
    <div className="App">
      <ClipLoader color={"#123abc"} loading={true} size={150} />
    </div>
  );
}

BeatLoader

The BeatLoader consists of multiple dots that bounce. You can customize its color, loading state, size, and margin between dots.

import { BeatLoader } from 'react-spinners';

function App() {
  return (
    <div className="App">
      <BeatLoader color={"#123abc"} loading={true} size={15} margin={2} />
    </div>
  );
}

BarLoader

The BarLoader is a horizontal bar that animates to indicate loading. You can customize its color, loading state, width, and height.

import { BarLoader } from 'react-spinners';

function App() {
  return (
    <div className="App">
      <BarLoader color={"#123abc"} loading={true} width={100} height={4} />
    </div>
  );
}

Other packages similar to react-spinners

react-loader-spinner

react-loader-spinner provides a variety of SVG-based loading indicators for React applications. It offers more types of spinners compared to react-spinners and allows for more detailed customization of each spinner.

react-loading

react-loading is another package that offers a collection of loading indicators for React. It is simpler and has fewer customization options compared to react-spinners, but it is lightweight and easy to use.

react-content-loader

react-content-loader allows you to create SVG loading placeholders that mimic the content being loaded. It is more focused on skeleton screens rather than traditional spinners, providing a different approach to indicating loading states.

README

React Spinners

A collection of loading spinners with React.js based on Halogen.

This package is bootstraped using react-npm-boilerplate

Demo

Demo Page

Installation

npm install react-spinners --save

Usage

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.

Each loader accepts a loading prop as a boolean. The loader will not render anything if loading is false. The loading prop defaults to true.

IMPORTANT: This package uses emotion. Remember to add the plugin to .babelrc, for example:

{
    "presets": ["react", "es2015", "stage-0"],
    "plugins": ["emotion"]
}

Examples

Ring Loader

import React from 'react';
import { RingLoader } from 'react-spinners';

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
  }
  render() {
    return (
      <div className='sweet-loading'>
        <RingLoader
          color={'#123abc'} 
          loading={this.state.loading} 
        />
      </div>
    )
  }
}

Clip Loader with Custom CSS, and Size

import React from 'react';
import { RingLoader } from 'react-spinners';

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
  }
  render() {
    return (
      <div className='sweet-loading'>
        <ClipLoader
          loaderStyle={{display: "block", margin: "0 auto", borderColor: 'red'}}
          sizeUnit={"px"}
          size={"150"}
          color={'#123abc'}
          loading={this.state.loading}
        />
      </div> 
    )
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true
color: '#000000'
loaderStyle: {}

Note: For loaderStyle, the resulting css will be the combination of the default props and the newly passed in css. This typically adjusts the css of the wrapper of the loader, not the actual loader properties themselves.
Instead of writing css properties in kebab-case like regular css, you write them in camelCase, for example background-color would be backgroundColor. You can find out more details here.

Loader	size:int	height:int	width:int	radius:int	margin:str
BarLoader		4	100
BeatLoader	15				2px
BounceLoader	60
CircleLoader	50
ClipLoader	35
ClimbingBoxLoader	15
DotLoader	60				2px
FadeLoader		15	5	2	2px
GridLoader	15
HashLoader	50				2px
MoonLoader	60				2px
PacmanLoader	25				2px
PropagateLoader	15
PulseLoader	15				2px
RingLoader	60				2px
RiseLoader	15				2px
RotateLoader	15				2px
ScaleLoader		35	4	2	2px
SyncLoader	15				2px

Changelog

0.3.3

Note: this release was deprecated through removing loaderStyle prop. Please update to 0.4.1 or higher.

• Add loaderStyle prop to loaders to allow more customized loader