Skip to content
Related Articles

Related Articles

Improve Article

React animated loading/splash screen using ‘react-spinners’

  • Last Updated : 30 Jun, 2021

Displaying a loading or splash screen during response time from the server is an excellent way to interact with the user. But making a loading/splash screen becomes difficult when we want to practically use an animated loader, where we need to make extra efforts to write down its styling file. To overcome this problem, we use a bunch of predefined loaders from the react-spinners module.

Creating React Application And Installing Module:

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:

    cd foldername

     



  • Step 3: After creating the ReactJS application, Install the required module using the following command:

    npm i react-spinners

Project Structure: It will look like the following.

Project Structure

Approach: 

  • Step 1: We will write our code in App.js, no need to make any other components for this project. For using the predefined spinners we need to import the ‘loader‘ component from ‘react-spinners‘.
  • Step 2: Also we need useState to add a state to our functional component and useEffect is also needed.

what we need to import

  • Step 3: Add a state isLoading which will indicate that our page is loading or not.
  • Step 4: Add a setTimeout() inside useEffect to make the splash screen appear for a certain time period.
  • Step 5: Lastly we can use a custom CSS block to override its property and use it when isLoading is true i.e page is still loading.

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js




import React, { useState, useEffect } from 'react';
  
// Importing loader
import PacmanLoader from "react-spinners/PacmanLoader";
import ClockLoader from "react-spinners/ClockLoader";
import './App.css';
  
const App = () => {
  
  // Loading state 
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
  
    // Wait for 3 seconds
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  }, []);
  
  // Custom css for loader
  const override = `
  display: block;
  margin: 0 auto;
  border-color: red;
`;
  
  return isLoading ?
  
    // If page is still loading then splash screen
    <PacmanLoader color={'#36D7B7'} isLoading={isLoading}
      css={override} size={150} /> :
    <h1 className="App">
      This is Main Page
      {<ClockLoader color={'#36D7B7'} isLoading={isLoading}
        css={override} size={150} />}
    </h1>
}
  
export default App;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

Reference:  




My Personal Notes arrow_drop_up
Recommended Articles
Page :