Better-react-spinkit NPM

better-react-spinkit

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

Donate

BTC: 33dgdBhV1Yf5ERKLLKS7ztEAEEx3zTvSkw
ETH: 0xa6938ead6d6820377fed78b657e4eb6c5c44d1b3

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' />
    )
  }
}