| 1 | react-spinkit
|
| 2 | =============
|
| 3 |
|
| 4 | A collection of loading indicators animated with CSS for React
|
| 5 |
|
| 6 | Currently I've ported all the spinner animations from
|
| 7 | [Spinkit](https://github.com/tobiasahlin/SpinKit). If you have other favorite
|
| 8 | css spinner you'd like to include, open an issue.
|
| 9 |
|
| 10 | ## CSS
|
| 11 | If you use [Webpack](http://webpack.github.io) and the
|
| 12 | [css-loader](https://github.com/webpack/css-loader) to build your project, then the
|
| 13 | css for each spinner is automatically required (by adding `cssRequire` as a prop).
|
| 14 |
|
| 15 | Otherwise, you'll need to include the necessary css for each spinner you
|
| 16 | use from `/css`.
|
| 17 |
|
| 18 | ## Fade in spinners after one second
|
| 19 | According to [research by Jakob Nielsen](http://www.nngroup.com/articles/response-times-3-important-limits/), feedback after operations aren't
|
| 20 | needed for about a second. You can set your spinner to only appear after
|
| 21 | a second by adding the `fadeIn` prop e.g. `<Spinner
|
| 22 | spinnerName='three-bounce' fadeIn />`
|
| 23 |
|
| 24 | This requires `./css/fade-in.css` to be included either automatically
|
| 25 | with Webpack or manually.
|
| 26 |
|
| 27 |
|
| 28 | ## Demo and documentation
|
| 29 | http://kyleamathews.github.io/react-spinkit/
|