Skip to content
Related Articles

Related Articles

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

View Discussion
Improve Article
Save Article
Like Article
  • Difficulty Level : Basic
  • Last Updated : 03 Sep, 2021

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.


  type="Spinner Type"
  color="rgb color"
  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













My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!