Implementing React Loading Spinners

• 5th Apr 2023 • 4 min read • React.js

Cover Image for Implementing React Loading Spinners

Loaders play a pivotal role in enhancing user experience in applications by ensuring a smooth transition while loading data, rendering components, or processing information. By understanding loader implementation and various styles, developers can create a polished and user-friendly interface. In this article, we'll walk you through creating a simple React loader using CSS and explore different spinner styles you can implement for your application.

Implementing a Simple React Loaderlink

Here, we'll guide you on implementing a basic circle spinning loader without using third-party libraries. However, there are libraries like react-spinners which can take the work out of this for you.

Step 1: Set Up Your React Project

First, create a new React project using the following command:

npx create-react-app react-loader-example

Navigate to the project and open it in your preferred code editor:

cd react-loader-example

Step 2: Create a Loader Component

In your src folder, create a new file named Loader.js, and add the following code to create a simple spinning circle loader:

import React from 'react';
import './Loader.css';

const Loader = () => {
  return <div className='loader'></div>;
};

export default Loader;

Step 3: Style the Loader Using CSS

Create a new file, Loader.css, inside your src folder. Add the following CSS to define the spinner style:

.loader {
  border: 8px solid #f3f3f3;
  border-top: 8px solid #3498db;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: spin 2s linear infinite;
}

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

Step 4: Add the Loader to Your Main Component

In the src folder, open App.js. Import the Loader component:

import Loader from "./Loader";

Then, use state to control the visibility of the loader using the useState and useEffect hooks from React:

import React, { useState, useEffect } from "react";

Next, add state for our loader and set it to true by default:

const [isLoading, setIsLoading] = useState(true);

Afterward, add the useEffect hook to simulate data fetching and set the loader to disappear after 3 seconds:

useEffect(() => {
  setTimeout(() => setIsLoading(false), 3000);
}, []);

Add the loader component to your JSX, making sure to set the loader's visibility based on the state:

{isLoading && <Loader />}

To style the loader further, you can add CSS in the App.css file to position it correctly.

Now that we've created a simple spinning loader without a third-party library, let's explore different spinner styles and variations.

Different Spinner Styles for React Loaderslink

Below are a few examples of different spinner styles that can enhance your application's user experience.

1. Double Circle Spinner

Create your DoubleCircleLoader.js component within the src folder with the following code:

import React from 'react';
import './DoubleCircleLoader.css';

const DoubleCircleLoader = () => {
  return (
    <div className='double-circle-loader'>
      <div className='circle1'></div>
      <div className='circle2'></div>
    </div>
  );
};

export default DoubleCircleLoader;

Then create a DoubleCircleLoader.css file with the respective styling:

.double-circle-loader {
  position: relative;
}

.circle1,
.circle2 {
  border: 4px solid #3498db;
  border-bottom-color: transparent;
  border-radius: 50%;
  position: absolute;
  width: 40px;
  height: 40px;
  animation: circle-spin 1s infinite;
}

.circle2 {
  border-top-color: transparent;
  border-bottom-color: #3498db;
  animation-duration: 2s;
}

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

In your main component, import the DoubleCircleLoader:

import DoubleCircleLoader from "./DoubleCircleLoader";

Now replace the <Loader /> component with <DoubleCircleLoader /> to showcase the double circle spinner instead.

2. Bouncing Dot Spinner

Create a new file named BouncingDotLoader.js in the src folder, and add the following code:

import React from "react";
import "./BouncingDotLoader.css";

const BouncingDotLoader = () => {
  return (
    <div className="bouncing-dot-loader">
      <div className="dot"></div>
      <div className="dot"></div>
      <div className="dot"></div>
    </div>
  );
};

export default BouncingDotLoader;

Then, create a BouncingDotLoader.css file with the following styles:

.bouncing-dot-loader {
  display: flex;
  justify-content: center;
}

.dot {
  background-color: #3498db;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  animation: bounce 1.5s infinite ease-in-out;
}

.dot:nth-child(2) {
  animation-delay: -1s;
}

.dot:nth-child(3) {
  animation-delay: -0.5s;
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-25px);
  }
}

In your main component, import BouncingDotLoader:

import BouncingDotLoader from "./BouncingDotLoader";

Now, replace the <Loader /> component with <BouncingDotLoader /> to showcase the bouncing dot spinner.

3. Scaling Text Spinner

Create your ScalingTextLoader.js component within the src folder with the following code:

import React from 'react';
import './ScalingTextLoader.css';

const ScalingTextLoader = () => {
  return (
    <div className='scaling-text-loader'>
      <div className='letter'>L</div>
      <div className='letter'>O</div>
      <div className='letter'>A</div>
      <div className='letter'>D</div>
      <div className='letter'>I</div>
      <div className='letter'>N</div>
      <div className='letter'>G</div>
    </div>
  );
};

export default ScalingTextLoader;

Then create a ScalingTextLoader.css file with the respective styling:

.scaling-text-loader {
  display: flex;
  justify-content: center;
}

.letter {
  font-size: 30px;
  font-weight: bold;
  color: #3498db;
  animation: scale 1.5s infinite linear;
}

.letter:nth-child(2) {
  animation-delay: 0.1s;
}

.letter:nth-child(3) {
  animation-delay: 0.2s;
}

.letter:nth-child(4) {
  animation-delay: 0.3s;
}

.letter:nth-child(5) {
  animation-delay: 0.4s;
}

.letter:nth-child(6) {
  animation-delay: 0.5s;
}

.letter:nth-child(7) {
  animation-delay: 0.6s;
}

@keyframes scale {
  0%,
  100% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(1.5);
  }
}

In your main component, import the ScalingTextLoader:

import ScalingTextLoader from "./ScalingTextLoader";

Now replace the <Loader /> component with <ScalingTextLoader /> to showcase the scaling text spinner.

Conclusionlink

Implementing various loader styles in React can vastly improve user experience by providing visual feedback during loading processes. This article demonstrates several CSS-based spinner styles, each with their distinct appeal. By understanding loader implementation and experimenting with a range of spinners, you can deliver polished, engaging, and user-friendly applications.