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'

GitHub