react-spinners-kit
Version:
A collection of loading spinners
121 lines (90 loc) • 6.38 kB
Markdown
# React Spinners Kit
[](https://travis-ci.org/dmitrymorozoff/react-spinners-kit)
A collection of loading spinners built with [styled-components](https://styled-components.com).
## 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
```jsx
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 to `true`.
- The loader will not render anything if `loading` is `false`.
| 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.<br>
Open [http://localhost:1234](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