1.9.1 • Published 4 years ago
react-spinners-kit v1.9.1
React Spinners Kit
A collection of loading spinners built with styled-components.
Live Demo
- To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/
🚀 Installation
Install react-spinners-kit
using npm.
npm install --save react-spinners-kit
or if you prefer yarn
yarn add react-spinners-kit
👨🏻💻 Usage
import React from "react";
import ReactDOM from "react-dom";
import { PushSpinner } from "react-spinners-kit";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: true,
};
}
render() {
const { loading } = this.state;
return <PushSpinner size={30} color="#686769" loading={loading} />;
}
}
ReactDOM.render(<App />, document.getElementById("root"));
📃 PropTypes and Default Props
- Each spinner accepts a
loading
prop as a boolean. - The
loading
prop defaults totrue
. - The loader will not render anything if
loading
isfalse
.
Spinner | size: number | color: string | frontColor: string | backColor: string | sizeUnit: string |
---|---|---|---|---|---|
BallSpinner | 40 | #00ff89 | - | - | px |
BarsSpinner | 40 | #00ff89 | - | - | px |
CircleSpinner | 30 | #fff | - | - | px |
CubeSpinner | 25 | - | #00ff89 | #686769 | px |
DominoSpinner | 100 | #686769 | - | - | px |
FillSpinner | 20 | #686769 | - | - | px |
FireworkSpinner | 40 | #fff | - | - | px |
FlagSpinner | 40 | #fff | - | - | px |
GridSpinner | 40 | #fff | - | - | px |
GuardSpinner | 40 | - | #00ff89 | #686769 | px |
HeartSpinner | 40 | #fff | - | - | px |
ImpulseSpinner | 40 | - | #00ff89 | #686769 | px |
PulseSpinner | 40 | #fff | - | - | px |
PushSpinner | 30 | #686769 | - | - | px |
SequenceSpinner | 40 | - | #00ff89 | #686769 | px |
SphereSpinner | 30 | #fff | - | - | px |
SpiralSpinner | 40 | #00ff89 | #686769 | px | |
StageSpinner | 40 | #fff | - | - | px |
SwapSpinner | 40 | #686769 | - | - | px |
WaveSpinner | 30 | #fff | - | - | px |
ClapSpinner | 30 | - | #00ff89 | #686769 | px |
RotateSpinner | 45 | #00ff89 | - | - | px |
SwishSpinner | 40 | - | #4b4c56 | #fff | px |
GooSpinner | 55 | #fff | - | - | px |
CombSpinner | 100 | #fff | - | - | px |
PongSpinner | 60 | #4b4c56 | - | - | px |
RainbowSpinner | 50 | #fff | - | - | px |
RingSpinner | 30 | #00ff89 | - | - | px |
HoopSpinner | 45 | #4b4c56 | - | - | px |
FlapperSpinner | 30 | #00ff89 | - | - | px |
MagicSpinner | 70 | #fff | - | - | px |
JellyfishSpinner | 60 | #4b4c56 | - | - | px |
TraceSpinner | 70 | - | #00ff89 | #4b4c56 | px |
ClassicSpinner | 30 | #fff | - | - | px |
MetroSpinner | 40 | #fff | - | - | px |
WhisperSpinner | 50 | #fff | #4b4c56 | #00ff89 | px |
Development
You can also test the components locally by cloning this repo and doing the following steps:
Install dependencies from package.json
:
npm install
Runs the app in the development mode. Open http://localhost:1234 to view it in the browser.
npm start
Run linter
npm run lint
💻 Contributing
- Pull requests and ⭐ stars are always welcome
- For bugs and feature requests, please create an issue
- Lint and test your code
License
MIT
1.9.1
4 years ago
1.9.0
5 years ago
1.8.0
5 years ago
1.7.5
5 years ago
1.7.4
5 years ago
1.7.3
5 years ago
1.7.1
5 years ago
1.7.0
5 years ago
1.6.0
5 years ago
1.5.5
5 years ago
1.5.4
5 years ago
1.5.3
5 years ago
1.5.2
5 years ago
1.5.1
5 years ago
1.5.0
5 years ago
1.4.5
5 years ago
1.3.1
5 years ago
1.3.0
5 years ago
1.2.0
5 years ago
1.1.2
5 years ago
1.1.0
6 years ago
1.0.3
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago