JSPM

  • Created
  • Published
  • Downloads 453335
  • Score
    100M100P100Q175426F
  • License MIT

A collection of react loading spinners

Package Exports

  • react-spinners

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-spinners) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Spinners

npm version dependencies

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>
        <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
ClipLoader 35
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