How to use loading animation by using the react-loader-spinner through npm ?

The spinner to indicate the loading state. We can also modify the appearance, size, and placement of the spinners with the propeTypes available in the react-loader-spinner. The react-loader-spinner is an npm package that provides a simple and attractive SVG spinner component that can be used in any of your projects. This package has more than 75k+ downloads weekly.

Here for loader, we are going to use npm package called react-loader-spinner. It is a package for loaders. For in-depth knowledge, you can visit the below link.

https://www.npmjs.com/package/react-loader-spinner

Syntax:

<Loader
  type="Spinner Type"
  color="rgb color"
  height={number}
  width={number}
  timeout={number in ms}
/>;

Types of spinner: All types of the spinner can be used similarly you just need to change the type of the loader.

• Audio
• Ball-Triangle
• Bars
• Circles
• Grid
• Hearts
• Oval
• Puff
• Rings
• TailSpin
• ThreeDots

PropTypes: All the types of spinner accept these props.

• visible: It is a boolean value that defines that the spinner should be visible or not, the default value is false.
• type: This prop defines the spinner type.
• height: This prop defines the height of the SVG spinner and the default value is 80.
• width: This prop defines the width of the SVG spinner and the default value is 80.
• color: This prop defines the color of the spinner.
• secondaryColor: This prop is available on the plane and mutatingDots loaders.
• timeout: This defines the effective time of the spinner.
• radius: This prop set the radius of the spinner.

Creating React Application and Installing Module:

Step 1: Create the React app using the command.

npx create-react-app foldername 

Step 2: Now move into your project folder i.e. foldername by using this command.

cd foldername

Step 3: Now install the package into your project folder.

npm install react-loader-spinner

Step 4: Now create a new file into your src folder i.e. loader.js

Project Structure: It will look like this. Here our folder name is react_loader.

Example: In this example, we will create a loading spinner, for that, we have already created a component file that is loader.js. We will call the loadr.js file into our main rendering file App.js

App.js