DEV Community

Cover image for How to Create a Loading Spinner in React with styled-components
Cath Leyson
Cath Leyson

Posted on

14 2 2 2 3

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>
  );

}
Enter fullscreen mode Exit fullscreen mode

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 

  );
}
Enter fullscreen mode Exit fullscreen mode

Hope this helps!

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (1)

Collapse
 
h3xn30n profile image
NE0386

👏👏👏

Cloudinary image

Optimize, customize, deliver, manage and analyze your images.

Remove background in all your web images at the same time, use outpainting to expand images with matching content, remove objects via open-set object detection and fill, recolor, crop, resize... Discover these and hundreds more ways to manage your web images and videos on a scale.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay