ray

rayloading

loading components

Showing:

Popularity

Downloads/wk

3

Maintenance

No Maintenance Data Available

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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

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

License

MIT

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial