react-spinner-loader
provides simple React SVG spinner component which can be implemented for async await operation before data loads to the view.
npm install react-loader-spinner --save
# or
yarn add react-loader-spinner
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'
/>
Change webpack config as:
test: /\.scss$/ to test: /\.s?css$/
Newer version just import css file from node modules to app.js
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} /> |
- Rings spinner is not supported in Safari
MIT