react-loader-spinner
Collection set of react-spinner for async operation
react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.
Installation
$ npm install react-loader-spinner --save
Demo
Usage
import Loader from 'react-loader-spinner'
export default class App extends React.Component {
//other logic
render() {
return(
<Loader
type="Puff"
color="#00BFFF"
height="100"
width="100"
/>
);
}
}
Types of Spinner
react-loader-spinner component has following types of spinner.
Spinner Type | Implementation |
---|---|
Audio | <Loader type="Audio" color="#somecolor" height={80} width={80} /> |
Ball-Triangle | <Loader type="Ball-Triangle" color="#somecolor" height={80} width={80} /> |
Bars | <Loader type="Bars" color="#somecolor" height={80} width={80} /> |
Circles | <Loader type="Circles" color="#somecolor" height={80} width={80}/> |
Grid | <Loader type="Grid" color="#somecolor" height={80} width={80} /> |
Hearts | <Loader type="Hearts" color="#somecolor" height={80} width={80} /> |
Oval | <Loader type="Oval" color="#somecolor" height={80} width={80} /> |
Puff | <Loader type="Puff" color="#somecolor" height={80} width={80} /> |
Rings | <Loader type="Rings" color="#somecolor" height={80} width={80} /> |
TailSpin | <Loader type="TailSpin" color="#somecolor" height={80} width={80} /> |
ThreeDots | <Loader type="ThreeDots" color="#somecolor" height={80} width={80} /> |
PropTypes Available
react-loader-spinner component accept following props. Instructions on how to use them are below.
PropType | Detail |
---|---|
type | Type of spinner you want to display. View the type in Types of Spinner section. |
height | Height props define the height of the svg spinner. Default height is 80px. |
width | Width props define the width of the spinner. Default Width is 80px. |
color | [Color Props is provide color to the spinner. Default color is light blue. |
TODO LIST
- Update Readme Table With New Component
- Change Docs on Storybooks
License
MIT
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- babel-runtime#^6.26.0
- prop-types#^15.6.2
- Released
- 2018-12-05
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Browser
- Browser Independent