react-loader

To see a demo of all the components, go to: https://uditiarora.github.io/react-loader/

Installation

Using NPM:

$ npm install react-loader-web --save

Example

 import Loader from 'react-loader-web'
 export default class App extends React.Component {
    render() {
	 return(
	  <Loader
	     type="Simple"
	     color="#00BFFF"
	     height={100}
	     width={100}
	     timeout={3000}

	  />
	 );
    }
 }

Types of Loaders

react-loader-web component has the following types of spinners.

Spinner Type	Implementation
BallTriangle	<Loader type="BallTriangle" color="#00BFFF" height={100} width={100} />
Bars	<Loader type="Bars" color="#00BFFF" height={100} width={100} />
Clock	<Loader type="Clock" color="#00BFFF" height={100} width={100} />
Compass	<Loader type="Compass" color="#00BFFF" height={100} width={100} />
DancingSquares	<Loader type="DancingSquares" color="#00BFFF" height={100} width={100} />
FallingBars	<Loader type="FallingBars" color="#00BFFF" height={100} width={100} />
Flower	<Loader type="Flower" color="#00BFFF" height={100} width={100} />
HexagonRipple	<Loader type="HexagonRipple" color="#00BFFF" height={100} width={100} />
InfinitePlug	<Loader type="InfinitePlug" color="#00BFFF" height={100} width={100} />
Loading	<Loader type="Loading" color="#00BFFF" height={100} width={100} />
MultipleRings	<Loader type="MultipleRings" color="#00BFFF" height={100} width={100} />
Rectangles	<Loader type="Rectangles" color="#00BFFF" height={100} width={100} />
Ring	<Loader type="Ring" color="#00BFFF" height={100} width={100} />
Ripples	<Loader type="Ripples" color="#00BFFF" height={100} width={100} />
Simple	<Loader type="Simple" color="#00BFFF" height={100} width={100} />
Square	<Loader type="Square" color="#00BFFF" height={100} width={100} />
ThreeDots	<Loader type="ThreeDots" color="#00BFFF" height={100} width={100} />
ThreeJumpingDots	<Loader type="ThreeJumpingDots" color="#00BFFF" height={100} width={100} />
ThreeRings	<Loader type="ThreeRings" color="#00BFFF" height={100} width={100} />
Wheel	<Loader type="Wheel" color="#00BFFF" height={100} width={100} />