Package Exports
- react-loader-spinner
Readme
react-spinner-loader provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.
Installation
npm install react-loader-spinner --save
# or
yarn add react-loader-spinnerDocumentation:
Usage
No css import is required
import { Audio } from 'react-loader-spinner'
<Audio
height = "80"
width = "80"
radius = "9"
color = 'green'
ariaLabel = 'three-dots-loading'
wrapperStyle
wrapperClass
/>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