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"; Component { ; thisstate = loading: true ; } { const loading = thisstate; return <PushSpinner = ="#686769" = /> ; } ReactDOM;
📃 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