better-react-spinkit

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

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.

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 first.

License

ISC

Documentation

👀 docs