In today’s fast-paced world, web applications often rely on asynchronous operations and data fetching that can introduce delays. To enhance the user experience and provide visual feedback during these loading periods, incorporating loading animations has become a common practice. React developers can easily add loading animations to their applications by utilizing the react-loader-spinner available through npm. This article will guide you through the process of using react-loader-spinner to create appealing loading animations in your React projects.
The 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. 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 the loader, we are going to use the npm package called react-loader-spinner. It is a package for loaders.
Syntax:
<Loader
type="Spinner Type"
color="rgb color"
height={number}
width={number}
timeout={number in ms}
/>;
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.
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 in your src folder i.e. loader.js
Project Structure: It will look like this. Here are 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
Javascript
import Loader from './loader'import './App.css';function App() { return ( <div className="App"> <Loader></Loader> </div> );}export default App; |
loader.js
Javascript
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
