sysix / react-loader-spinner

Collection set of react-spinner for async operation

react-spinner-loader provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.

Installation

Using NPM:

$ npm install react-loader-spinner --save

Using yarn

$ yarn add react-loader-spinner

Documentation:

DEMO

Code SandBox:

https://codesandbox.io/s/react-loader-spinner-weqls?file=/src/App.js

Usage

Import required css

Import the css to main app.js file

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

import { Audio } from  'react-loader-spinner'


<Audio
    height="100"
    width="100"
    color='grey'
    ariaLabel='loading'
  />

If webpack throws 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

Types of Spinner

react-loader-spinner component has the following types of spinners.

Spinner Type	Implementation
Audio	<Audio color="#00BFFF" height={80} width={80} />
BallTriangle	<BallTriangle color="#00BFFF" height={80} width={80} />
Bars	<Bars color="#00BFFF" height={80} width={80} />
Circles	<Circles color="#00BFFF" height={80} width={80}/>
Grid	<Grid color="#00BFFF" height={80} width={80} />
Hearts	<Hearts color="#00BFFF" height={80} width={80} />
Oval	<Oval color="#00BFFF" height={80} width={80} />
Puff	<Puff color="#00BFFF" height={80} width={80} />
Rings	<Rings color="#00BFFF" height={80} width={80} />
TailSpin	<TailSpin color="#00BFFF" height={80} width={80} />
ThreeDots	<ThreeDots color="#00BFFF" height={80} width={80} />

Here are the list of the task for which we want PR:

• Rings spinner is not supported in Safari

License

MIT