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
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" }}>
GeeksforGeeks
</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
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.
Last Updated :
03 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...