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):

James W. Lane III 💻 📖 ⚠️

Willane Paiva 📖

Larissa Moura 💻 ⚠️🔧🔌

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

License