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

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.

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>
        <RingLoader color={'#123abc'} loading={this.state.loading} />
      </div>
    )
  }
}

Available Loaders

Loader	Props
BeatLoader	loading:boolean, color:string, size:number, margin:number
BounceLoader	loading:boolean, color:string, size:number
ClipLoader	loading:boolean, color:string, size:number
DotLoader	loading:boolean, color:string, size:number, margin:number
FadeLoader	loading:boolean, color:string, height:number, width:number, radius:number, margin:number
GridLoader	loading:boolean, color:string, size:number, margin:number
MoonLoader	loading:boolean, color:string, size:number, margin:number
PacmanLoader	loading:boolean, color:string, size:number, margin:number
PulseLoader	loading:boolean, color:string, size:number, margin:number
RingLoader	loading:boolean, color:string, size:number, margin:number
RiseLoader	loading:boolean, color:string, size:number, margin:number
RotateLoader	loading:boolean, color:string, size:number, margin:number
ScaleLoader	loading:boolean, color:string, height:number, width:number, radius:number, margin:number
SkewLoader	loading:boolean, color:string, size:number
SquareLoader	loading:boolean, color:string, size:number, margin:number
SyncLoader	loading:boolean, color:string, size:number, margin:number