# better-react-spinkit

> A collection of loading indicators animated with CSS for React

Latest version **2.0.4** (published 2017-12-15) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.4 |
| Published | 2017-12-15 |
| First published | 2016-04-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ben Tatum |
| Maintainers | bentatum |
| Keywords | react, react-component, spinkit, spinners, loaders, loading, icon, waiting, react loaders, react loading, react loading gif, react loading indicator, react spinners |

## Links

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

## Dependencies (2)

- [minify-css-string](https://npm.io/package/minify-css-string.md) ^1.0.0
- [inline-style-prefixer](https://npm.io/package/inline-style-prefixer.md) ^3.0.3

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 2.0.4 (latest) — 2017-12-15
- 2.0.6 (2.0.6) — 2021-12-12
- 2.0.5 (2.0.5) — 2021-12-12
- 2.0.2 — 2017-10-03
- 2.0.1 — 2017-10-03
- 2.0.0 — 2017-05-07
- 2.0.0-7 — 2017-05-07
- 2.0.0-6 — 2017-02-24
- 2.0.0-5 — 2017-02-24
- 2.0.0-4 — 2016-08-23
- 2.0.0-3 — 2016-07-21
- 2.0.0-2 — 2016-07-21
- 2.0.0-1 — 2016-07-12
- 2.0.0-0 — 2016-07-06
- 1.2.4 — 2016-06-28
- … 36 more at https://npm.io/package/better-react-spinkit/versions

## README

# better-react-spinkit

[![npm][npm-image]][npm-url]
[![npm][npm-downloads-image]][npm-url]
[![travis][travis-image]][travis-url]
[![standard][standard-image]][standard-url]

[npm-image]: https://img.shields.io/npm/v/better-react-spinkit.svg?style=flat-square
[npm-downloads-image]: https://img.shields.io/npm/dt/better-react-spinkit.svg?maxAge=2592000
[npm-url]: https://www.npmjs.com/package/better-react-spinkit
[travis-image]: https://img.shields.io/travis/bentatum/better-react-spinkit.svg?style=flat-square
[travis-url]: https://travis-ci.org/bentatum/better-react-spinkit
[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square
[standard-url]: http://npm.im/standard

A collection of loading indicators animated with CSS, powered by React.

Donate BTC: `1H7dDZeisBvvnJZtXJ7f5TCqNv2W3MnRN2`

Donate ETH: `0x660ABF8bc22FDCebe26bb570f02D47C2b9828432`

Donate LTC: `LQJsuBUg1kPrxJT7KWjcAFVQaDsY7h1f6B`

## Install
`npm i better-react-spinkit`

## Usage
```js
import {
  ChasingDots,
  Circle,
  CubeGrid,
  DoubleBounce,
  FadingCircle,
  FoldingCube,
  Pulse,
  RotatingPlane,
  ThreeBounce,
  WanderingCubes,
  Wave
} from 'better-react-spinkit'

// somewhere in a render function ...
<Circle />
```

## Context Configuration
Optionally, you can configure size and color props in context to avoid managing configuration on each instance.
```js
import { default as React, Component, PropTypes } from 'react'
import { ThreeBounce } from 'better-react-spinkit'

class Application extends Component {
  static childContextTypes = {
    betterReactSpinkit: PropTypes.object
  };
  getChildContext () {
    return {
      betterReactSpinkit: {
        color: 'green',
        size: 25
      }
    }
  }
  render () {
    // Inline props override the contextual settings.
    return (
      <ThreeBounce size={15} color='blue' />
    )
  }
}
```

## Contributing

Contributions welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.

## License

[ISC](LICENSE.md)

## Documentation

👀 [docs](http://better-react-spinkit.benjamintatum.com/)

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