rayloading

1.0.7 • Public • Published

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 Chrome Firefox Opera Safari
IE 10+ ✔ Chrome 4.0+ ✔ Firefox 16.0+ ✔ Opera 15.0+ ✔ Safari 4.0+ ✔

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i rayloading

Weekly Downloads

2

Version

1.0.7

License

MIT

Unpacked Size

147 kB

Total Files

38

Last publish

Collaborators

  • ilex.h