react-loader-web

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

Usage no npm install needed!

<script type="module">
  import reactLoaderWeb from 'https://cdn.skypack.dev/react-loader-web';
</script>

README

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} />