How to add a loading spinner in React

Today, we will show you how to add a loading spinner in React. In this article, we will use the React Package">NPM package which uses pure CSS to display the loader.

Checkout more articles on ReactJS

How to add Font Awesome 5 in React
picker-in-the-react" title="How to add Emoji Picker in the React">How to add Emoji Picker in the React
How to add a Progress Bar in React
barcode-scanner-in-react" title="Barcode scanner in React">Barcode scanner in React
React Interview Questions and Answers

Demo Application

How to add a loading spinner in React - Clue Mediator

1. Install NPM package

Here, we will use the react-spinkit NPM package to implement the loader. Run the following command to install the package.

npm i react-spinkit

2. Add spinner in component

To add the spinner, we have to simply import the component and render the element as below.

// import package
import Spinner from 'react-spinkit';

// render element
<spinner name="double-bounce">
</spinner>

The following are the properties of the spinner.

name — specify spinner to use (defaults to `three-bounce`).
fadeIn — set the time before the spinner fades in.
overrideSpinnerClassName — change the default `sk-spinner` className.
className — add a custom class name to the outer div.
color — programmatically set the color of the spinners; this can either be a hex value or a color word.

Let’s add a few spinners in the React component.

App.js

import React from 'react';
import Spinner from 'react-spinkit';

function App() {

  return (
    <div class="app">
      <h4>Add a loading spinner in React - <a href="https://www.cluemediator.com" target="_blank" rel="noopener">Clue Mediator</a></h4>
      <div class="spinner-outer">
        <spinner name="double-bounce">
        <spinner name="circle">
        <spinner name="cube-grid">
        <spinner name="line-scale" color="steelblue">
      </spinner></spinner></spinner></spinner></div>
    </div>
  );
}

export default App;

3. Output

Run the application and check the output in the browser. See more examples on the demo page.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂

Demo & Source Code

GitHub Repository StackBlitz Project