react-spinners-kit

A collection of loading spinners

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-spinners-kit
257241.9.14 years ago6 years agoMinified + gzip package size for react-spinners-kit in KB

Readme

React Spinners Kit
npm version Build Status downloads license A collection of loading spinners built with styled-components. Imgur

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 <PushSpinner size={30} color="#686769" loading={loading} />;
}
} 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 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