react-pure-loaders

React PureComponent loading animations

Demo

Demo Page

Installation

Install with yarn:

yarn add react-pure-loaders

Install with npm:

npm install react-pure-loaders --save

Usage

Each loader has their own default properties. You can overwrite the defaults by passing props into the loaders. Each loader accepts a loading prop as a boolean. The loader will not render anything if loading is false.

Example

import React from 'react';
import { BallBeat } from 'react-pure-loaders';

class AwesomeComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true
    }
  }
  render() {
    return (
      <div>
        <BallBeat
          color={'#123abc'}
          loading={this.state.loading}
        />
      </div>
    )
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true
color: '#000000'

Loader | size:int | height:int | width:int | radius:int | margin:str -----------------------:|:--------:|:----------:|:---------:|:----------:|:---------: BallBeat | | | | | BallClipRotate | | | | | BallClipRotateMultiple | | | | | BallClipRotatePulse | | | | | BallGridBeat | | | | | BallGridPulse | | | | | BallPulse | | | | | BallPulseRise | | | | | BallPulseRound | | | | | BallPulseSync | | | | | BallRotate | | | | | BallScale | | | | | BallScaleMultiple | | | | | BallScaleRandom | | | | | BallScaleRipple | | | | | BallScaleRippleMultiple | | | | | BallSpinFadeLoader | | | | | BallSpinLoader | | | | | BallTrianglePath | | | | | BallZigZag | | | | | BallZigZagDeflect | | | | | LineScale | | | | | LineScaleParty | | | | | LineScalePulseOut | | | | | LineScalePulseOutRapid | | | | | LineScaleRandom | | | | | LineSpinFadeLoader | | | | | CubeTransition | | | | | Pacman | | | | | SemiCircleSpin | | | | | SquareSpin | | | | | TriangleSkewSpin | | | | |

Contributors

Thanks goes to these wonderful people (emoji key):

This project follows the all-contributors specification. Contributions of any kind welcome!

License