https://github.com/dmitrymorozoff/react-spinners-kit
A collection of loading spinners with React.js
https://github.com/dmitrymorozoff/react-spinners-kit
javascript loaders loading-spinners progressbar react react-components react-spinners spinner spinners
Last synced: 6 months ago
JSON representation
A collection of loading spinners with React.js
- Host: GitHub
- URL: https://github.com/dmitrymorozoff/react-spinners-kit
- Owner: dmitrymorozoff
- License: mit
- Created: 2018-09-16T13:01:41.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-31T16:54:53.000Z (over 2 years ago)
- Last Synced: 2025-03-28T13:08:39.221Z (6 months ago)
- Topics: javascript, loaders, loading-spinners, progressbar, react, react-components, react-spinners, spinner, spinners
- Language: JavaScript
- Size: 3.16 MB
- Stars: 264
- Watchers: 3
- Forks: 44
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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 ;
}
}
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`:
### `npm install`
Runs the app in the development mode.
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