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.

How to use react-loader-spinner.

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

Types of react-loader-spinner and implementations

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

Note: Rings spinner is not supported in Safari.

Check the demo here

Thanks for reading...

Happy Coding!