https://github.com/bentatum/better-react-spinkit
A collection of loading indicators for React
https://github.com/bentatum/better-react-spinkit
loading-animations loading-spinner react
Last synced: 3 months ago
JSON representation
A collection of loading indicators for React
- Host: GitHub
- URL: https://github.com/bentatum/better-react-spinkit
- Owner: bentatum
- License: isc
- Created: 2016-06-28T20:26:36.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2021-12-12T21:24:55.000Z (over 3 years ago)
- Last Synced: 2024-04-13T21:57:00.180Z (about 1 year ago)
- Topics: loading-animations, loading-spinner, react
- Language: JavaScript
- Homepage: http://better-react-spinkit.benjamintatum.com/
- Size: 107 KB
- Stars: 186
- Watchers: 3
- Forks: 25
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
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: 33dgdBhV1Yf5ERKLLKS7ztEAEEx3zTvSkw
ETH: 0xa6938ead6d6820377fed78b657e4eb6c5c44d1b3
```
## 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 ...
```
## 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 (
)
}
}
```
## Contributing
Contributions welcome! Please read the [contributing guidelines](CONTRIBUTING.md) first.
## License
[ISC](LICENSE.md)
## Documentation
👀 [docs](http://better-react-spinkit.benjamintatum.com/)