Awesome
This is a zero-dependency React adaptation of Sam Herberts SVG Loaders library.
Usage
Install from NPM
npm install svg-loaders-react
Import the SVGLoaders components
Import all the loaders in a namespaced fashion
You can import all the loaders at once:
import * as SVGLoaders from 'svg-loaders-react';
and use them in a namespaced manner:
<SVGLoaders.Bars />
Import an individual loader
You can also import a single loader:
import { Bars } from 'svg-loaders-react'
and use it without any fancy namespacing:
<Bars />
Components
<Audio />
<BallTriangle />
<Bars />
<Circles />
<Grid />
<Hearts />
<Oval />
<Puff />
<Rings />
<SpinningCircles />
<TailSpin />
<ThreeDots />
Options
Each of these components should be able to accept any SVG tag presentation attributes as props.
Common Usage
// render the Puff loader with a stroke opacity of .125
<Puff strokeOpacity=".125" />
// render the Puff loader with a stroke of mint green
<Puff stroke="#98ff98" />
// render the Puff loader with a stroke of mint green and a stroke opactiy of .125
<Puff stroke="#98ff98" strokeOpacity=".125"/>