Introduction

In this article, We will learn how to add spinner loader in React.js

Spinner provides SVG React spinner component which can be implemented for await operation before data loads to the view.

Types of Spinner

1. Audio
2. Ball-Triangle
3. Bars
4. Circles
5. Grid
6. Hearts
7. Oval
8. Puff
9. Rings
10. TailSpin

How To Used

The spinner is main purpose to indicate the loading state.

We can also change appearance, size, and placement of the spinners

Install Package

npm install react-loader-spinner

Let’s understand with the following example.

Open your project in visual studio code.

We are going to apply BallTriangle Spinner in React.js project.

If you want to used other spinner like Audio, Bars etc. then you will put spinner name as like below code.

Open your App.js component and paste below code in it.

import logo from './logo.svg';
import './App.css';
import "react-loader-spinner/dist/loader/css/react-spinner-loader.css";
import { BallTriangle } from 'react-loader-spinner'

function App() {
  return (
    <div className='loader-block' >
      <BallTriangle color="black" height={200} radius={6} />
    </div>
  );
}
export default App;

Open your App.css file and paste below CSS in it.

.loader-block {
  position: fixed;
  top: -100%;
  left: 0;
  width: 100%;
  background: white;
  width: 100%;
  opacity: 0;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
  overflow: hidden;
  z-index: 9999 !important;
  opacity: 1;
  top: 0;
  bottom: 0;
  overflow: scroll;
  display: flex;
    justify-content: center;
    align-items: center;
}

Output

Thank you for read. If you have any doubt please let me know.

Read my previous blog here.