React PureComponent loading animations

react-pure-loaders

React Pure Loaders is a package that disponibilizes loaders for your Project. Those loaders are used as components, using color and a loading variables as properties.

The component expects the to receive the color as a string with the hexadecimal code and the loading as a boolean, that is true by default.

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

GitHub