react-spinners
v0.14.1
Published
A collection of react loading spinners
Downloads
1,765,939
Maintainers
Readme
React Spinners
A collection of loading spinners with React.js based on Halogen.
This package is bootstraped using react-npm-boilerplate
Demo
Installation
With Yarn:
yarn add react-spinners
With npm:
npm install --save react-spinners
Usage
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
.
Example
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 (
<div className="sweet-loading">
<button onClick={() => setLoading(!loading)}>Toggle Loader</button>
<input value={color} onChange={(input) => setColor(input.target.value)} placeholder="Color of the loader" />
<ClipLoader
color={color}
loading={loading}
cssOverride={override}
size={150}
aria-label="Loading Spinner"
data-testid="loader"
/>
</div>
);
}
export default App;
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 (
<div className="sweet-loading">
<ClipLoader
cssOverride={override}
size={150}
color={"#123abc"}
loading={this.state.loading}
speedMultiplier={1.5}
aria-label="Loading Spinner"
data-testid="loader"
/>
</div>
);
}
}
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 aria-*
and data-*
props are fully supported.
color
prop
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
cssOverride
prop
The cssOverride
prop is an object of camelCase styles used to create inline styles on the loaders. Any html css property is valid here.
size
, height
, width
, and radius
props
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
|