Add a loading animation in React using react-spinners

Today, we'll show you how to add a loading animation in React using react-spinners. `react-spinners` is a popular library for adding loading spinners in React applications. It provides a collection of pre-built spinner components that can be easily imported and used in your app.

This library is lightweight and easy to use and it allows you to pick a spinner that fits your needs. It provides a wide variety of spinner types such as CircleLoader, PacmanLoader, PulseLoader, etc. With react-spinners you can easily customize the spinner by using props like size, color, loading. It is compatible with both React and React Native.

Demo Application

Output - Add a loading animation in React using react-spinners - Clue Mediator

Add a loading animation in React using react-spinners

1. Project structure
2. Package dependencies
3. Implementation
4. Output

1. Project structure

• react-loading-spinner-example

  • node_modules

  • public

    • index.html

  • src

    • App.js
    • index.css
    • index.js

  • package-lock.json

  • package.json

  • README.md

2. Package dependencies

Run the following command to install react-spinners npm package.

npm i react-spinners

You will find the version of the following packages in React application.

react

^18.2.0

react-spinners

^0.13.8

3. Implementation

Refer to the following files for implementation.

App.js

import React, { useState } from 'react';
import { ClipLoader, BarLoader, PropagateLoader, RingLoader } from "react-spinners";

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

  return (
    <div class="App">
      <h4>Add a loading animation in React using react-spinnerst - <a href="https://www.cluemediator.com">Clue Mediator</a></h4>
      <button onclick="{()" ==""> setLoading(!loading)}>Toggle Loaders</button>

      <div class="spinners">
        <cliploader color="blue" size={30} loading={loading} cssoverride={{ display: "block" }}>
        <propagateloader loading={loading}>
        <ringloader loading={loading}>
        <barloader loading={loading} color="purple">
      </barloader></ringloader></propagateloader></cliploader></div>

      <div class="note">
        <b>Note:</b> It accepts basic colors: maroon, red, orange, yellow, olive, green, purple, white, fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
      </div>
    </div>
  );
}

export default App;

index.css

body {
  margin: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

.spinners {
  width: 540px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.note {
  margin-top: 20px;
  width: 540px;
  color: #444;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <react class="strictmode">
    <app>
  </app></react>
);

4. Output

Run your application and check the output in the browser.
Live Demo

That's it for today.
Thank you for reading. Happy Coding..!!

Demo & Source Code

GitHub Repository StackBlitz Project