react-spinners
A collection of react loading spinners
Last updated 6 years ago
by davidhu2000
.
MIT
·
Repository
·
Bugs
·
Original npm
·
Tarball
·
package.json
$ cnpm install react-spinners
SYNC missed versions from
official npm registry.
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} />
</div>
);
}
export default App;
<summary>Example using React Class</summary>
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}
/>
</div>
);
}
}
Available Loaders, PropTypes, and Default Values
Common default props for all loaders:
loading: true;
color: "#000000";
cssOverride: {}
speedMultiplier: 1;
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 |
Current Tags
- 0.13.4 ... latest (4 years ago)
144 Versions
- 0.13.4 ... 4 years ago
- 0.13.3 ... 4 years ago
- 0.13.2 ... 4 years ago
- 0.13.1 ... 4 years ago
- 0.13.0 ... 4 years ago
- 0.13.0-beta.7 ... 4 years ago
- 0.13.0-beta.6 ... 4 years ago
- 0.13.0-beta.5 ... 4 years ago
- 0.13.0-beta.4 ... 4 years ago
- 0.13.0-beta.3 ... 4 years ago
- 0.13.0-beta.2 ... 4 years ago
- 0.13.0-beta.1 ... 4 years ago
- 0.13.0-alpha.5 ... 4 years ago
- 0.13.0-alpha.4 ... 4 years ago
- 0.13.0-alpha.3 ... 4 years ago
- 0.13.0-alpha.1 ... 4 years ago
- 0.12.0 ... 4 years ago
- 0.12.0-beta.1 ... 4 years ago
- 0.12.0-alpha.3 ... 4 years ago
- 0.12.0-alpha.2 ... 5 years ago
- 0.12.0-alpha.1 ... 5 years ago
- 0.11.0 ... 5 years ago
- 0.11.0-beta.1 ... 5 years ago
- 0.11.0-alpha.8 ... 5 years ago
- 0.11.0-alpha.7 ... 5 years ago
- 0.11.0-alpha.6 ... 5 years ago
- 0.11.0-alpha.5 ... 5 years ago
- 0.11.0-alpha.4 ... 5 years ago
- 0.11.0-alpha.3 ... 5 years ago
- 0.10.6 ... 5 years ago
- 0.10.4 ... 5 years ago
- 0.10.3 ... 5 years ago
- 0.10.2 [deprecated] ... 5 years ago
- 0.11.0-alpha.2 ... 5 years ago
- 0.11.0-alpha.1 ... 5 years ago
- 0.10.1 [deprecated] ... 5 years ago
- 0.10.0 [deprecated] ... 5 years ago
- 0.10.0-beta.3 ... 5 years ago
- 0.10.0-beta.2 ... 5 years ago
- 0.10.0-beta.1 ... 5 years ago
- 0.10.0-alpha.3 ... 5 years ago
- 0.10.0-alpha.2 ... 6 years ago
- 0.10.0-alpha.1 ... 6 years ago
- 0.9.0 ... 6 years ago
- 0.8.3 ... 6 years ago
- 0.8.2 ... 6 years ago
- 0.8.1 ... 6 years ago
- 0.8.0 ... 6 years ago
- 0.7.2 ... 6 years ago
- 0.7.1 ... 6 years ago
- 0.7.0 ... 6 years ago
- 0.7.0-beta.1 ... 6 years ago
- 0.7.0-alpha.5 ... 6 years ago
- 0.7.0-alpha.4 ... 6 years ago
- 0.7.0-alpha.3 ... 6 years ago
- 0.7.0-alpha.2 ... 6 years ago
- 0.7.0-alpha.1 ... 6 years ago
- 0.6.1 ... 7 years ago
- 0.6.0 ... 7 years ago
- 0.6.0-beta.1 ... 7 years ago
- 0.6.0-alpha.10 ... 7 years ago
- 0.6.0-alpha.9 ... 7 years ago
- 0.6.0-alpha.8 ... 7 years ago
- 0.6.0-alpha.7 ... 7 years ago
- 0.6.0-alpha.6 ... 7 years ago
- 0.6.0-alpha.5 ... 7 years ago
- 0.6.0-alpha.4 ... 7 years ago
- 0.6.0-alpha.3 ... 7 years ago
- 0.6.0-alpha.2 ... 7 years ago
- 0.6.0-alpha.1 ... 7 years ago
- 0.5.13 [deprecated] ... 7 years ago
- 0.5.12 ... 7 years ago
- 0.5.11 ... 7 years ago
- 0.5.9 ... 7 years ago
- 0.5.8 ... 7 years ago
- 0.5.7 ... 7 years ago
- 0.5.6 ... 7 years ago
- 0.5.5 ... 7 years ago
- 0.5.4 ... 7 years ago
- 0.5.3 ... 7 years ago
- 0.5.2 ... 7 years ago
- 0.5.1 ... 7 years ago
- 0.5.0 ... 7 years ago
- 0.4.8 ... 7 years ago
- 0.4.7 ... 7 years ago
- 0.4.6 ... 7 years ago
- 0.4.5 ... 8 years ago
- 0.4.4 ... 8 years ago
- 0.4.3 ... 8 years ago
- 0.4.2 ... 8 years ago
- 0.4.1 ... 8 years ago
- 0.4.0 [deprecated] ... 8 years ago
- 0.3.3 [deprecated] ... 8 years ago
- 0.3.2 ... 8 years ago
- 0.3.1 ... 8 years ago
- 0.3.0 ... 8 years ago
- 0.2.6 ... 8 years ago
- 0.2.5 ... 8 years ago
- 0.2.4 ... 8 years ago
- 0.2.3 ... 8 years ago
- 0.2.2 ... 8 years ago
- 0.2.1 ... 8 years ago
- 0.2.0 [deprecated] ... 8 years ago
- 0.1.9 [deprecated] ... 8 years ago
- 0.1.8 [deprecated] ... 8 years ago
- 0.1.7 [deprecated] ... 8 years ago
- 0.1.6 [deprecated] ... 9 years ago
- 0.1.5 [deprecated] ... 9 years ago
- 0.1.4 [deprecated] ... 9 years ago
- 0.1.3 [deprecated] ... 9 years ago
- 0.1.2 [deprecated] ... 9 years ago
- 0.1.1 [deprecated] ... 9 years ago
- 0.1.0 [deprecated] ... 9 years ago
- 0.0.30 ... 9 years ago
- 0.0.29 ... 9 years ago
- 0.0.28 ... 9 years ago
- 0.0.27 ... 9 years ago
- 0.0.26 ... 9 years ago
- 0.0.25 ... 9 years ago
- 0.0.24 ... 9 years ago
- 0.0.23 ... 9 years ago
- 0.0.22 ... 9 years ago
- 0.0.21 ... 9 years ago
- 0.0.20 ... 9 years ago
- 0.0.18 ... 9 years ago
- 0.0.17 ... 9 years ago
- 0.0.16 ... 9 years ago
- 0.0.15 ... 9 years ago
- 0.0.14 ... 9 years ago
- 0.0.13 ... 9 years ago
- 0.0.12 ... 9 years ago
- 0.0.11 ... 9 years ago
- 0.0.10 ... 9 years ago
- 0.0.9 ... 9 years ago
- 0.0.8 ... 9 years ago
- 0.0.7 ... 9 years ago
- 0.0.6 ... 9 years ago
- 0.0.5 ... 9 years ago
- 0.0.4 ... 9 years ago
- 0.0.3 ... 9 years ago
- 0.0.2 ... 9 years ago
- 0.0.1 ... 9 years ago
- 0.0.0 ... 9 years ago
- 1.0.0 [deprecated] ... 9 years ago
Maintainers (1)
davidhu2000
Downloads
Today
0
This Week
0
This Month
89
Last Day
0
Last Week
89
Last Month
0
Dependencies (1)
- @emotion/core ^10.0.15
Dev Dependencies (37)
- @babel/cli ^7.5.5
- @babel/core ^7.5.5
- @babel/node ^7.5.5
- @babel/plugin-proposal-class-properties ^7.5.5
- @babel/plugin-transform-react-jsx ^7.3.0
- @babel/plugin-transform-typescript ^7.5.5
- @babel/preset-env ^7.5.5
- @babel/preset-react ^7.0.0
- @types/enzyme ^3.10.3
- @types/enzyme-adapter-react-16 ^1.0.5
- @types/jest ^24.0.21
- @types/react ^16.9.1
- @types/react-click-outside ^3.0.3
- @types/react-color ^3.0.1
- @types/react-dom ^16.8.5
- babel-loader ^8.0.6
- babel-plugin-emotion ^10.0.15
- babel-plugin-transform-es2015-modules-umd ^6.24.1
- coveralls ^3.0.6
- enzyme ^3.10.0
- enzyme-adapter-react-16 ^1.14.0
- enzyme-to-json ^3.4.0
- fork-ts-checker-webpack-plugin ^3.0.1
- html-webpack-plugin ^3.2.0
- jest ^24.8.0
- jest-emotion ^10.0.14
- react ^16.9.0
- react-click-outside ^3.0.0
- react-color ^2.17.3
- react-dom ^16.9.0
- ts-jest ^24.1.0
- ts-loader ^6.0.4
- tslint ^5.18.0
- tslint-react ^4.0.0
- typescript ^3.5.3
- webpack ^4.39.1
- webpack-cli ^3.3.6
Dependents (1)