Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

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

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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
Last Updated : 03 Sep, 2021
Like Article
Save Article
Similar Reads
Related Tutorials