React PureComponent loading animations
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.circleci
.github
.storybook
other
src
stories
test
.all-contributorsrc
.gitignore
.npmignore
.npmrc
.nvmrc
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
jest.config.js
lint-staged.config.js
package-lock.json
package.json
tsconfig.json
tslint.json
yarn.lock

README.md

react-pure-loaders

Build Status Code Coverage dependencies Status devDependencies Status version downloads

MIT License Greenkeeper badge FOSSA Status Known Vulnerabilities PRs Welcome All Contributors

Donate Code of Conduct Roadmap Examples semantic-release Commitizen friendly

Watch on GitHub Star on GitHub Tweet

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

💻 📖

Greenkeeper

🔧

fossabot

🔧

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

License

FOSSA Status