A collection of loading spinners with React.js based on Halogen.
This package is bootstraped using react-npm-boilerplate
npm install react-spinners --saveEach 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>
)
}
}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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent