3.0.1 • Published 6 years ago
react-pure-loaders v3.0.1
react-pure-loaders
React PureComponent loading animations
Demo
Installation
Install with yarn:
yarn add react-pure-loadersInstall with npm:
npm install react-pure-loaders --saveUsage
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.
Example
import React from 'react';
import { BallBeat } from 'react-pure-loaders';
class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true
}
}
render() {
return (
<div>
<BallBeat
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:str |
|---|---|---|---|---|---|
| BallBeat | |||||
| BallClipRotate | |||||
| BallClipRotateMultiple | |||||
| BallClipRotatePulse | |||||
| BallGridBeat | |||||
| BallGridPulse | |||||
| BallPulse | |||||
| BallPulseRise | |||||
| BallPulseRound | |||||
| BallPulseSync | |||||
| BallRotate | |||||
| BallScale | |||||
| BallScaleMultiple | |||||
| BallScaleRandom | |||||
| BallScaleRipple | |||||
| BallScaleRippleMultiple | |||||
| BallSpinFadeLoader | |||||
| BallSpinLoader | |||||
| BallTrianglePath | |||||
| BallZigZag | |||||
| BallZigZagDeflect | |||||
| LineScale | |||||
| LineScaleParty | |||||
| LineScalePulseOut | |||||
| LineScalePulseOutRapid | |||||
| LineScaleRandom | |||||
| LineSpinFadeLoader | |||||
| CubeTransition | |||||
| Pacman | |||||
| SemiCircleSpin | |||||
| SquareSpin | |||||
| TriangleSkewSpin |
Contributors
Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!