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 NPM package which uses pure CSS to display the loader.

Checkout more articles on ReactJS

Demo Application

How to add a loading spinner in React - Clue Mediator

Steps to add a loading spinner in React

Install NPM package
Add spinner in component
Output

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