Skip to content
Related Articles

Related Articles

Improve Article
How to use loading animation by using the react-loader-spinner through npm ?
  • Last Updated : 31 Mar, 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.

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.
  • radious: 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




import Loader from './loader'
import './App.css';
  
function App() {
  return (
    <div className="App">
      <Loader></Loader>
    </div>
  );
}
  
export default App;

loader.js




import Loader from "react-loader-spinner";
const LoaderComp = ()=>{
      
    return(
        <Loader
        type="TailSpin"
        color="rgb(155, 236, 34)"
        height={70}
        width={70}
        timeout={5000} 
        />
          
    );
}
export default LoaderComp;

Output:

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :