How to use loading animation by using the react-loader-spinner through npm ?
In React, loading animation by using the react-loader-spinner enhances the user experience and provides visual feedback during these loading periods. For the asynchronous operations and data fetching it works as a visual representation of the process until the data is loaded. React developers can easily add loading animations to their applications by utilizing the react-loader-spinner available through npm.
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. The spinner in react-loader-spinner is used 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.
Syntax:
<TailSpin // Type of spinner
height="80"
width="80"
color="#4fa94d"
ariaLabel="tail-spin-loading"
radius="1"
wrapperStyle={{}}
wrapperClass=""
visible={true}
/>
Types of spinner: All types of 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 types of spinners accept these props.
- visible: It is a boolean value that defines whether 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.
Steps to create React Application
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
Project Structure:
The updated dependencies after installing packages
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-loader-spinner": "^5.4.5",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example: This examle uses the loader from react-loader-spinner to show the loading animation while loading the components.
Javascript
// Filename - App.js import { useState } from "react" ; import Loader from "./loader" ; function App() { const [isLoading, setIsLoading] = useState( true ); setTimeout(() => { setIsLoading( false ); }, 2000); return ( <div style={{ textAlign: "center" , margin: "auto" , }} > <h1 style={{ color: "green" }}> w3wiki </h1> {isLoading ? ( <div style={{ width: "100px" , margin: "auto" , }} > <Loader /> </div> ) : ( <div> <h3> React Example to Implemet Loader using react-loader-spinner </h3> </div> )} </div> ); } export default App; |
Javascript
// Filename - loader.js import { TailSpin } from "react-loader-spinner" ; const LoaderComp = () => { return ( <TailSpin height= "80" width= "80" color= "#4fa94d" ariaLabel= "tail-spin-loading" radius= "1" wrapperStyle={{}} wrapperClass= "" visible={ true } /> ); }; export default LoaderComp; |
Step to Run the Application: Use this command in the terminal inside the project directory.
npm start
Output: This output will be visible on the http://localhost:3000/ on the browser window.