brs

better-react-spinkit

A collection of loading indicators for React

Showing:

Popularity

Downloads/wk

5.8K

GitHub Stars

180

Maintenance

Last Commit

4yrs ago

Contributors

6

Package

Dependencies

2

Size (min+gzip)

13.6KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Readme

better-react-spinkit

npm npm travis standard

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

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

Contributing

Contributions welcome! Please read the contributing guidelines first.

License

ISC

Documentation

👀 docs

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Tutorials

No tutorials found
Add a tutorial