React Spinners

![npm version][npm_url]
![circle ci][ci_url]
![downloads][npm_url]
![license][npm_url]


[npm_url]: https://www.npmjs.org/package/react-spinners
[ci_url]: https://circleci.com/gh/davidhu2000/react-spinners

This is just a fork of https://www.npmjs.com/package/react-spinners, made small changes to have Packman loader eat anything(that's it everything else is the same)

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

This package is bootstraped using react-npm-boilerplate

Demo

Demo Page

Installation

``bash
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"]
}
`

$3

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

class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true
}
}
render() {
return (



)
}
}
`

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

`js
loading: true
color: '#000000'
`

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`