# react-spinkit

> A collection of loading indicators animated with CSS for React

Latest version **3.0.0** (published 2017-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-spinkit
pnpm add react-spinkit
yarn add react-spinkit
bun add react-spinkit
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2017-05-22 |
| First published | 2014-08-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-spinkit) |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1491 |
| Author | Kyle Mathews |
| Maintainers | kylemathews |
| Keywords | react, react-component, spinkit, spinners |

## Links

- npm: https://www.npmjs.com/package/react-spinkit
- Repository: https://github.com/KyleAMathews/react-spinkit
- Issues: https://github.com/KyleAMathews/react-spinkit/issues
- npm.io page: https://npm.io/package/react-spinkit

## Dependencies (4)

- [classnames](https://npm.io/package/classnames.md) ^2.2.3
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [loaders.css](https://npm.io/package/loaders.css.md) ^0.1.2
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2017-05-22
- 2.1.2 — 2017-05-01
- 2.1.1 — 2017-02-17
- 2.1.0 — 2017-02-17
- 2.0.0 — 2017-01-25
- 1.1.11 — 2016-08-24
- 1.1.10 — 2016-08-22
- 1.1.9 — 2016-08-15
- 1.1.8 — 2016-07-07
- 1.1.7 — 2016-04-18
- 1.1.6 — 2016-04-07
- 1.1.5 — 2016-04-07
- 1.1.4 — 2015-08-06
- 1.1.2 — 2015-05-26
- 1.1.1 — 2015-05-26
- … 14 more at https://npm.io/package/react-spinkit/versions

## README

react-spinkit
=============

A collection of loading indicators animated with CSS for React

Currently I've ported all the spinner animations from
[Spinkit](https://github.com/tobiasahlin/SpinKit). If you have other favorite
 css spinner you'd like to include, open an issue.

## Install

```console
$ npm install react-spinkit --save
```

## Usage
```javascript
var Spinner = require('react-spinkit');

<Spinner name='double-bounce' />
```

See more examples on the [demo page](http://kyleamathews.github.io/react-spinkit/).

## CSS
CSS is loaded automatically when using [Webpack](http://webpack.github.io) with the
[css-loader](https://github.com/webpack/css-loader) and [style-loader](https://github.com/webpack/style-loader), or Browserify/[CSSify](https://github.com/davidguttman/cssify)
 to build your project.

## External spinners
This also includes most of the spinners from [loaders.css](https://github.com/ConnorAtherton/loaders.css). Note that while
all of the native spinners from Spinkit are contained within their bounding divs,
some of the loaders.css spinners have a zero-sized parent div and extend outward
from that (as you can see on the demos page). Regardless of this, they are all
easily centerable with flexbox.

## Webpack or Browserify is required
Currently we only support Browserify and Webpack. If you'd like support
for other build tools that also support requiring CSS, PRs are welcome.

## Fades in spinners after one second
According to [research by Jakob Nielsen](http://www.nngroup.com/articles/response-times-3-important-limits/),
feedback after user operations isn't necessary for about a second so by
default, react-spinkit will fade in your spinner at one second. Nevertheless,
you can configure spinner fade-in behavior with the `fadeIn` prop, which
accepts values `full` (the default), `half`, `quarter`, and `none` for one
second, a half second, a quarter second, and no fade in, respectively.
For example: `<Spinner fadeIn='half' />`.

## PropTypes
* **name**—specify spinner to use (defaults to `three-bounce`).
* **fadeIn**-set the time before the spinner fades in.
* **overrideSpinnerClassName**—change the default `sk-spinner` className.
* **className**-add a custom classname to the outer div.
* **color**-programmatically set the color of the spinners; this can either be a
hex value or a color word.

## Server-side rendering
If you want to use this for server-side rendering, set
`process.env.REACT_SPINKIT_NO_STYLES` in your server build environment,
in webpack via `webpack.DefinePlugin`, or whatever is appropriate to your
build process. This will skip the import of styles and allow evaluation of
the SpinKit code in node.

## Demo and documentation
http://kyleamathews.github.io/react-spinkit/

---
_Source: https://npm.io/package/react-spinkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._