react-spinner-loader provides simple React.js spinner component which can be implemented for async wait operation before data load to the view.

Installation

Using NPM:

$ npm install react-loader-spinner --save

Using yarn

$ yarn add react-loader-spinner

Import required css

 import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"

Demo

View in page

Usage

 import Loader from 'react-loader-spinner'
 export default class App extends React.Component {
  //other logic
    render() {
     return(
      <Loader
         type="Puff"
         color="#00BFFF"
         height={100}
         width={100}
         timeout={3000} //3 secs

      />
     );
    }
 }

If webpack throw issue with css. (For older version of this package)

Change webpack config as: test: /\.scss$/ to test: /\.s?css$/

Newer version just import css file from node modules to app.js