Building an Animated Loader in React JS

In this article, we will see how to make an animated loader in React.js. Animated loaders are used in many websites to enhance the look and feel. In React.js, we can use the react-spinkit package to create beautiful animated loaders easily without having to write hundreds of lines of CSS.

First create a React project −

npx create-react-app tutorialpurpose

Go to the project directory −

cd tutorialpurpose

Example

Install the react-spinkit package −

npm i --save react-spinkit

This library provides premade loaders and it is really easy to add it in your project. Using spinner, you can add any animated loader in React.

Add the following lines of code in App.js −

import Spinner from "react-spinkit";
export default function App() {
   return (
      <div
         style={{
            display: "flex",
            marginTop: "200px",
            justifyContent: "space-between",}}>
         <Spinner name="double-bounce" style={{ width: 100, height: 100 }} />
         <Spinner name="circle" style={{ width: 100, height: 100 }} />
         <Spinner name="cube-grid" style={{ width: 100, height: 100 }} />
         <Spinner name="wave" color="coral" style={{ width: 100, height: 100 }} />
         <Spinner name="three-bounce" style={{ width: 100, height: 100 }} />
         <Spinner name="wandering-cubes" style={{ width: 100, height: 100 }} />
         <Spinner name="chasing-dots" style={{ width: 100, height: 100 }} />
         <Spinner name="rotating-plane" style={{ width: 100, height: 100 }} />
         <Spinner name="wordpress" style={{ width: 100, height: 100 }} />
         <Spinner name="ball-grid-beat" style={{ width: 100, height: 100 }} />
      </div>
   );
}

Here we first created a simple div for centering all the content and then we added different types of loaders in it using our spinkit library. The name argument takes the type of loader and style takes the width and height and other styling for loaders.

Output

On execution, it will produce the following output −