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
A collection of loading spinners with React.js based on Halogen.
This package is bootstraped using react-npm-boilerplate
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, 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 |