React: how to create a loader component

  • React
  • Gabriele Romanato

A "loader" is an essential component in many web applications, especially when it comes to loading data asynchronously or performing complex, time-consuming operations. A loader provides visual feedback to users, indicating that the application is working in the background to satisfy a request. In this article, you will learn how to create a loader component in React, a popular JavaScript framework for building interactive user interfaces.

Creating the Loader component

Now we will create a new React component called "Loader". You can do this by creating a new file called Loader.js in the src folder of your project and then defining the component within the file.


// src/Loader.js

import React from 'react';

const Loader = () => {
   return (
     <div className="loader">
       <div className="loader-spinner"></div>
     </div>
   );
};

export default Loader;

In this component, we created a div with the "loader" class and inside it another div with the "loader-spinner" class. These elements will constitute our loader.

Styling the Loader

Now that we have defined our component, we need to add some CSS rules to make it visually appealing. Add the following CSS rules in your App.css file or in a new dedicated CSS file:


/* src/Loader.css */

.loader {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
   min-height: 100vh;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 999999;
   background-color: #fff;
}

.loader-spinner {
   border: 4px solid rgba(255, 255, 255, 0.3);
   border-top: 4px solid #3498db;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: spin 1s linear infinite;
}

@keyframes spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
}

This CSS defines a loader in the center of the page with a circle icon that rotates while loading.

Using the Loader

Now that you've created the Loader component and styled it, you can use it in your React pages or components to provide visual feedback during loading operations. Here's how you can use the Loader inside a component:


// src/App.js

import React, { useState, useEffect } from 'react';
import './Loader.css';
import Loader from './Loader';

function App() {
   const [loading, setLoading] = useState(true);

   useEffect(() => {
     // Let's simulate a 3 second loading delay
     setTimeout(() => {
       setLoading(false);
     }, 3000);
   }, []);

   return (
     <div className="App">
       {loading ? <Loader /> : <h1>Content loaded successfully!</h1>}
     </div>
   );
}

export default App;

In this example, the Loader component will appear as long as the loading state variable is true. After a 3 second delay (which simulates a loading operation), the loading variable is set to false, and the "Content loaded successfully!" component will be displayed instead.

Conclusions

You just learned how to create a loader component in React to provide visual feedback during loading operations. This is just one example of how you can customize and use a loader component. You can tailor it to the specific needs of your application, improving the user experience during asynchronous loading operations.

Back to top