How to use react-loader-spinner

What is react-loader-spinner?

react-spinner-loader provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

You can install the library using your favorite dependency manager.
Using yarn:

yarn add react-loader-spinner

Using npm:

npm install react-loader-spinner --save

Here are some examples of code on how to use react-loader-spinner in your react application.

Firstly, Import required css. Import the css to main app.js file.

Code sample:

import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";

Then:


import { Audio } from  'react-loader-spinner'


<Audio
    height="100"
    width="100"
    color='grey'
    ariaLabel='loading'
  />

Note: If webpack throws issue with css. (For older version of this package). Change webpack config as: test: /\.scss$/ to test: /\.s?css$/

The newer version just import css file from node modules to app.js

Audio here is the implementation sample: <Audio color="#00BFFF" height={80} width={80} />
BallTriangle here is the implementation code sample: <BallTriangle color="#00BFFF" height={80} width={80} />
Bars here is the implementation code sample: <Bars color="#00BFFF" height={80} width={80} />
Circles here is the implementation code sample: <Circles color="#00BFFF" height={80} width={80}/>
Grid here is the implementation code sample: <Grid color="#00BFFF" height={80} width={80} />
Hearts here is the implementation code sample: <Hearts color="#00BFFF" height={80} width={80} />
Oval here is the implementation code sample: <Oval color="#00BFFF" height={80} width={80} />
Puff here is the implementation code sample: <Puff color="#00BFFF" height={80} width={80} />
Rings here is the implementation code sample: <Rings color="#00BFFF" height={80} width={80} />
TailSpin here is the implementation code sample: <TailSpin color="#00BFFF" height={80} width={80} />
ThreeDots here is the implementation code sample: <ThreeDots color="#00BFFF" height={80} width={80} />