/react-loader-spinner

Collection set of react-spinner for async operation

Primary LanguageTypeScriptMIT LicenseMIT

Node.js Package release tag stars issue open-issues commits commits

title

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

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
    heigth="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} />

alt text

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

  • Rings spinner is not supported in Safari
  • Fix npm publish script

License

MIT