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
$ yarn add react-loader-spinner
https://codesandbox.io/s/react-loader-spinner-weqls?file=/src/App.js
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} /> |
Blossom | <Blossom color="#00BFFF" height={80} width={80} /> |
Star | <Star color="#00BFFF" height={80} width={80} /> |
MorphShapes | <MorphShapes color="#00BFFF" height={80} width={80} /> |
- Rings spinner is not supported in Safari
MIT