How to Create a Loading Spinner in React with styled-components

Introduction

In modern web applications, it's common to have asynchronous operations that require some time to complete.

During these operations, it's a good practice to provide visual feedback to the user, indicating that the application is still working.

One way to achieve this is by using a loading spinner, which is a visual element that rotates to indicate that the application is processing data or performing an action.

In this tutorial, we'll explore how to create a loading spinner in React using the styled-components library.

Step 1: Setting up the Project

Before we start implementing the loading spinner, make sure you have a React project set up with styled-components installed. If you haven't already, create a new React project using your preferred method (e.g., Create React App) and install styled-components by running the following command:

npm install styled-components


Step 2: Creating the LoadingSpinner Component

In this step, we'll create a functional component for the loading spinner. Open a new file called like loading-spinner.js and import React and styled-components.

We'll define two styled components: Container and Loader.

The Container component will center the spinner on the screen, and the Loader component will represent the spinning animation itself.

Here's the styling for the LoadingSpinner component:

import React from "react";
import styled from "styled-components";

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
`;

 const Loader = styled.div`
  border-width: 0.5rem;
  border-style: solid;
  border-color: purple purple purple purple;
  width: 3.625rem;
  height: 3.625rem;
  border-radius: 50%;
  position: relative;
  -webkit-animation: spin 2s infinite;
  animation: spin 2s infinite;

  &:before,
  &:after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: purple;
    position: absolute;
    left: 0.125rem;
  }

  &:before {
    top: 0.063rem;
  }

  &:after {
    bottom: 0.063rem;
  }

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

//Create functional component
export function LoadingSpinner() {

  return (
    <Container>
         <Loader />
    </Container>
  );

}

Step 3: Using the LoadingSpinner Component

Now that we have our component, we can use it wherever we need to display a loading state in our application. Making this reusable.

Import the LoadingSpinner component into the file where you want to use it and render it accordingly.

For example, if you have a component called MyComponent and you want to display the loading spinner while fetching data from an API, you can render it conditionally based on the loading state.

Here's an example of how I use it:

import { LoadingSpinner } from "./loading-spinner"

export function MyComponent() {

//I'm using react-query
  const { data, isLoading, isError, error } = useProjects();

  if (isLoading) {
    return <LoadingSpinner />;
  }

  if (isError)//...


  return (

       //render the array results 

  );
}

Hope this helps!