node package manager

react-spinners

React Spinners

npm version circle ci downloads license Code Triagers Badge

dependencies Status devDependencies Status peerDependencies Status

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.

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

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

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