How to create Loading Screen in ReactJS ?

Loading screen plays a major role in enhancing UX development. In this article, we are going to learn how we can create a Loading Screen in ReactJs. A loading screen is a picture shown by a computer program, often a video game, while the program is loading or initializing.

Prerequisites

• JavaScript and JSX
• React JS

Approach to create Loading Screen:

To create our loading screen we are going to use the react-loading package because it is powerful, lightweight, and fully customizable. After that, we will add different types of loading screens on our homepage using the installed package.

Steps to create React Application And Installing Module:

Step 1: You can create a new ReactJs project using the below command:

npx create-react-app gfg

IStep 2: Install the required package: Now we will install the react-loading package using the below command:

npm i react-loading

Project Structure:

The updated dependencies in package.json file will look like:

"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-loading": "^2.0.3",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: In this example, we are going to add the react-loading on the homepage of our app using the package that we installed. For this, add the below content in the App.js file.

//App.js

import React from "react";
import ReactLoading from "react-loading";

export default function Loading() {
    return (
        <div>
            <h2>Loading in ReactJs - GeeksforGeeks</h2>
            <ReactLoading type="balls" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="bars" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="bubbles" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="cubes" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="cylon" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="spin" color="#0000FF"
                height={100} width={50} />
            <ReactLoading type="spokes" color="#0000FF"
                height={100} width={50} />
            <ReactLoading
                type="spinningBubbles"
                color="#0000FF"
                height={100}
                width={50}
            />
        </div>
    );
}

Explanation: In the above example first, we are importing the ReactLoading component from the react-loading package. After that, we are using our ReactLoading component to add different types of loading screens. We can set the type, color, height, and width of the loading screen.

Steps to run the application: Run the below command in the terminal to run the app.

npm start

Output: