rayloading

loading

support react 16

To build the examples locally, run:

npm install
npm run demo

Then open: localhost:3001

install

npm install rayloading --save

Usage

import DotLoader from 'rayloading/lin/DotLoader';

class Example extends Component {
  render() {
    return (
      <DotLoader color="#FF5722" size="16px" margin="4px"/>
    );
  }
}

props

loaders

• PulseLoader
• RotateLoader
• BeatLoader
• RiseLoader
• SyncLoader
• GridLoader
• ClipLoader
• FadeLoader
• ScaleLoader
• SquareLoader
• PacmanLoader
• SkewLoader
• RingLoader
• MoonLoader
• DotLoader
• BounceLoader

color

const colors = {
  success: '#00a854',
  error: '#f04134',
  warning: '#ffbf0b',
  info: '#108ee9',
  dotred: '#ff5b05',
  orange: '#FF9800',
  deepOrange: '#FF5722',
  purple: '#9C27B0',
  deepPurple: '#673AB7'
};

extloader

• ExtCircleLoader

// S
<ExtCircleLoader />
// M
<ExtCircleLoader size={50} />
// L
<ExtCircleLoader size={100} />

• ExtCubeGrid

// S
<ExtCubeGrid />
// M
<ExtCubeGrid size={50} />
// L
<ExtCubeGrid size={100} />

• ExtFadingCircle

// S
<ExtFadingCircle />
// M
<ExtFadingCircle size={50} />
// L
<ExtFadingCircle size={100} />

• ExtFadingCircle

// S
<ExtFoldingCube />
// M
<ExtFoldingCube size={50} />
// L
<ExtFoldingCube size={100} />

• ExtRotatingPlane

// S
<ExtRotatingPlane />
// M
<ExtRotatingPlane size={50} />
// L
<ExtRotatingPlane size={100} />

• ExtThreeBounce

// S
<ExtThreeBounce />
// M
<ExtThreeBounce size={50} />
// L
<ExtThreeBounce size={100} />

// gutter
<div>
    <ExtThreeBounce gutter={10} />
    <br />
    <ExtThreeBounce gutter={20} />
    <br />
    <ExtThreeBounce gutter={30} />
</div>

// scale
<div>
    <ExtThreeBounce scaleEnd={0.4} />
    <br />
    <ExtThreeBounce scaleStart={0.4} />
    <br />
    <ExtThreeBounce scaleStart={1} scaleEnd={2} />
</div>

// timingFunction
<div>
    <ExtThreeBounce timingFunction='linear' />
    <br />
    <ExtThreeBounce timingFunction='ease' />
    <br />
    <ExtThreeBounce timingFunction='ease-in' />
    <br />
    <ExtThreeBounce timingFunction='ease-out' />
    <br />
    <ExtThreeBounce timingFunction='ease-in-out' />
</div>

• ExtWanderingCubes

// S
<ExtWanderingCubes />
// M
<ExtWanderingCubes size={50} />
// L
<ExtWanderingCubes size={100} />

• ExtWordpress

// S
<ExtWordpress />
// M
<ExtWordpress size={50} />
// L
<ExtWordpress size={100} />

// timingFunction
<div>
    <ExtWordpress timingFunction='linear' />
    <ExtWordpress timingFunction='ease' />
    <ExtWordpress timingFunction='ease-in' />
    <ExtWordpress timingFunction='ease-out' />
    <ExtWordpress timingFunction='ease-in-out' />
</div>

Browser Support

IE 10+ ✔	Chrome 4.0+ ✔	Firefox 16.0+ ✔	Opera 15.0+ ✔	Safari 4.0+ ✔

License

MIT