React Spinners Kit

!npm version
!downloads
!license

A collection of loading spinners built with styled-components.

!Imgur

Live Demo

- To check out live examples visit https://dmitrymorozoff.github.io/react-spinners-kit/

🚀 Installation

Install react-spinners-kit using npm.

$3

or if you prefer yarn

$3

👨🏻‍💻 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 ;
}
}

ReactDOM.render(, 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`:

$3

Runs the app in the development mode.

Open http://localhost:1234 to view it in the browser.

$3

Run linter

$3

💻 Contributing

- Pull requests and ⭐ stars are always welcome
- For bugs and feature requests, please create an issue
- Lint and test your code

License

MIT