# rayloading

> loading components

Latest version **1.0.7** (published 2024-01-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install rayloading
pnpm add rayloading
yarn add rayloading
bun add rayloading
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.7 |
| Published | 2024-01-30 |
| First published | 2017-02-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 143.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ilex.h |
| Maintainers | ilex.h |
| Keywords | react ray loading |

## Links

- npm: https://www.npmjs.com/package/rayloading
- npm.io page: https://npm.io/package/rayloading

## Dependencies (1)

- [domtool](https://npm.io/package/domtool.md) ^1.0.6

## Recent versions

- 1.0.7 (latest) — 2024-01-30
- 1.0.6 — 2020-09-26
- 1.0.5 — 2020-09-24
- 1.0.4 — 2017-12-19
- 1.0.3 — 2017-06-17
- 0.2.1 — 2017-04-25
- 1.0.1 — 2017-02-19
- 1.0.0 — 2017-02-19

## README

# rayloading

loading

support react 16

To build the examples locally, run:

```bash
npm install
npm run demo
```

Then open: [localhost:3001](http://localhost:3001)

## install

```bash
npm install rayloading --save
```

## Usage

```js
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

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

```

### extloader

* ExtCircleLoader

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

* ExtCubeGrid

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

* ExtFadingCircle

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

* ExtFadingCircle

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

* ExtRotatingPlane

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

* ExtThreeBounce

```js
// 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

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

* ExtWordpress

```js
// 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](https://raw.github.com/alrra/browser-logos/master/internet-explorer/internet-explorer_48x48.png) | ![Chrome](https://raw.github.com/alrra/browser-logos/master/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/firefox/firefox_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/opera/opera_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/safari/safari_48x48.png)
--- | --- | --- | --- | --- |
IE 10+ ✔ | Chrome 4.0+ ✔ | Firefox 16.0+ ✔ | Opera 15.0+ ✔ | Safari 4.0+ ✔ |

## License

MIT

---
_Source: https://npm.io/package/rayloading · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._