# styled-spinkit

[![Build Status](https://travis-ci.org/akameco/styled-spinkit.svg?branch=master)](https://travis-ci.org/akameco/styled-spinkit)
[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
[![MIT License](https://img.shields.io/npm/l/nps.svg?style=flat-square)](./license)
[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors)

> Simple animation loading components with [styled-components](https://github.com/styled-components/styled-components)

[![https://gyazo.com/9fdf10c73edd16495a854b199e8f9ee0](https://i.gyazo.com/9fdf10c73edd16495a854b199e8f9ee0.gif)](https://gyazo.com/9fdf10c73edd16495a854b199e8f9ee0)

See [React Storybook Demo](https://akameco.github.io/styled-spinkit/?knob-color=magenta&knob-number=60&selectedKind=CubeGrid&selectedStory=render%20magenta%2060&full=0&down=1&left=1&panelRight=1&downPanel=storybook-addon-background%2Fbackground-panel)

See [Bit components collection](https://bit.dev/akameco/styled-spinkit)

Inspired by [SpinKit](https://github.com/tobiasahlin/SpinKit).

## Install

```
$ yarn add styled-spinkit
```

or

```
$ npm install --save styled-spinkit
```

## API

### Components

- `<ChasingDots/>`
- `<Circle/>`
- `<CubeGrid/>`
- `<Pulse/>`
- `<FadingCircle/>`
- `<ThreeBounce/>`
- `<FoldingCube/>`
- `<WanderingCubes/>`
- `<WaveLoading/>`
- `<DoubleBounce/>`
- `<RotaingPlane/>`

#### Props

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `color` | `string` | `#333`  |
| `size`  | `number` | `40`    |

## Contributors

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
<table><tr><td align="center"><a href="http://akameco.github.io"><img src="https://avatars2.githubusercontent.com/u/4002137?v=4" width="100px;" alt="akameco"/><br /><sub><b>akameco</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Documentation">📖</a> <a href="https://github.com/akameco/styled-spinkit/commits?author=akameco" title="Tests">⚠️</a> <a href="#infra-akameco" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td><td align="center"><a href="https://github.com/jrusx"><img src="https://avatars1.githubusercontent.com/u/19670625?v=4" width="100px;" alt="jrusx"/><br /><sub><b>jrusx</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=jrusx" title="Code">💻</a> <a href="https://github.com/akameco/styled-spinkit/issues?q=author%3Ajrusx" title="Bug reports">🐛</a></td><td align="center"><a href="http://stackoverflow.com/users/6174694/annihil"><img src="https://avatars3.githubusercontent.com/u/16704309?v=4" width="100px;" alt="Bap ☺"/><br /><sub><b>Bap ☺</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=Annihil" title="Code">💻</a></td><td align="center"><a href="https://github.com/mrpandat"><img src="https://avatars1.githubusercontent.com/u/22916835?v=4" width="100px;" alt="KagXaef"/><br /><sub><b>KagXaef</b></sub></a><br /><a href="https://github.com/akameco/styled-spinkit/commits?author=mrpandat" title="Code">💻</a></td></tr></table>

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

## License

MIT © [akameco](http://akameco.github.io)