react-pure-loaders

React PureComponent loading animations

Demo

Demo Page

Installation

Install with yarn:

yarn add @emotion/core react-pure-loaders

Install with npm:

npm install @emotion/core 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}
        ></BallBeat>
      </div>
    )
  }
}

Available Loaders, PropTypes, and Default Values

Common default props for all loaders:

loading: true
color: '#000000'

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