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