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";

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.
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

anderjs/react-spinners-kit