A collection of react loading spinners
npm install @soomo/react-spinners![npm version][npm_url]
![downloads][npm_url]
![license][npm_url]
!Dependency Count
!Types Included
!Tree Shaking Supported
[npm_url]: https://www.npmjs.org/package/react-spinners
A collection of loading spinners with React.js based on Halogen.
This package is bootstraped using react-npm-boilerplate
With Yarn:
``bash`
yarn add react-spinners
With npm:
`bash`
npm install --save react-spinners
Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders.
Each loader accepts a loading prop as a boolean. The loader will render null if loading is false.
`tsx
import { useState, CSSProperties } from "react";
import ClipLoader from "react-spinners/ClipLoader";
const override: CSSProperties = {
display: "block",
margin: "0 auto",
borderColor: "red",
};
function App() {
let [loading, setLoading] = useState(true);
let [color, setColor] = useState("#ffffff");
return (
loading={loading}
cssOverride={override}
size={150}
aria-label="Loading Spinner"
data-testid="loader"
/>
export default App;
`
Example using React Class
`tsx
import React from "react";
import ClipLoader from "react-spinners/ClipLoader";
const override: React.CSSProperties = {
display: "block",
margin: "0 auto",
borderColor: "red",
};
class AwesomeComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
return (
Available Loaders, PropTypes, and Default Values
Common default props for all loaders:
loading: true;
color: "#000000";
cssOverride: {}
speedMultiplier: 1;
All valid HTML props such as
and data- props are fully supported.$3
color prop accepts a color hash in the format of #XXXXXX or #XXX. It also accepts basic colors listed below:> maroon, red, orange, yellow, olive, green, purple, white,
> fuchsia, lime, teal, aqua, blue, navy, black, gray, silver
$3
The
cssOverride prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.$3
The input to these props can be _number_ or _string_.
- If value is number, the loader will default to css unit
px.
- If value is string, the loader will verify the unit against valid css units.
- If unit is valid, return the original value
- If unit is invalid, output warning console log and default to px.The table below has the default values for each loader.
| Loader | size | height | width | radius | margin |
| ----------------: | :--: | :----: | :---: | :----: | :----: |
| BarLoader | |
4 | 100 | |
| BeatLoader | 15 | | | | 2 |
| BounceLoader | 60 | | | |
| CircleLoader | 50 | | | |
| ClimbingBoxLoader | 15 | | | |
| ClipLoader | 35 | | | |
| ClockLoader | 50 | | | |
| DotLoader | 60 | | | | 2 |
| FadeLoader | | 15 | 5 | 2 | 2 |
| GridLoader | 15 | | | |
| HashLoader | 50 | | | | 2 |
| MoonLoader | 60 | | | | 2 |
| PacmanLoader | 25 | | | | 2 |
| PropagateLoader | 15 | | | |
| PuffLoader | 60 | | | |
| PulseLoader | 15 | | | | 2 |
| RingLoader | 60 | | | | 2 |
| RiseLoader | 15 | | | | 2 |
| RotateLoader | 15 | | | | 2 |
| ScaleLoader | | 35 | 4 | 2 | 2 |
| SyncLoader | 15 | | | | 2` |