A collection of loading spinners
npm install react-spinners-kitreact-spinners-kit using npm.
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`: