react-css-loaders/README.md

React CSS Loaders

# React CSS Loaders

<a href="https://travis-ci.org/LucasBassetti/react-css-loaders"><img src="https://travis-ci.org/LucasBassetti/react-css-loaders.svg?branch=master" alt="Travis CI" /></a> <a href="https://badge.fury.io/js/react-css-loaders"><img src="https://badge.fury.io/js/react-css-loaders.svg" alt="npm version"> [![Coverage Status](https://coveralls.io/repos/github/LucasBassetti/react-css-loaders/badge.svg)](https://coveralls.io/github/LucasBassetti/react-css-loaders)


A collection of pure CSS React loading components. Based on Luke Haas [css-loaders](https://github.com/lukehaas/css-loaders) project.

<a href="https://lucasbassetti.com.br/react-css-loaders/">
<img src="https://cloud.githubusercontent.com/assets/1014326/26028622/d4de8bbe-37fa-11e7-95c4-a58c2779f4a3.gif" width="600" />
</a>

## Contents
- [Getting Started](#getting-started)
- [Usage](#usage)
- [Components](#components)
  - [BarLoader](#barloader)
  - [BubbleLoader](#bubbleloader)
  - [BubbleSpinLoader](#bubblespinloader)
  - [CometSpinLoader](#cometspinloader)
  - [CylinderSpinLoader](#cylinderspinloader)
  - [ResizeSpinLoader](#resizespinloader)
  - [RotateSpinLoader](#rotatespinloader)
  - [SpinLoader](#spinloader)
- [How to Contribute](#how-to-contribute)

## Getting Start

```bash
npm install react-css-loaders --save
```

## Usage

``` javascript
  import { BarLoader } from 'react-css-loaders';
  ...
  <BarLoader />
  ...
```

## Components

### BarLoader

##### Usage

`<BarLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1` |
| `size` | `PropTypes.number`  | `11` |

### BubbleLoader

##### Usage

`<BubbleLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.8` |
| `size` | `PropTypes.number`  | `10` |

### BubbleSpinLoader

##### Usage

`<BubbleSpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.3` |
| `size` | `PropTypes.number`  | `20` |

### CometSpinLoader

##### Usage

`<CometSpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.7` |
| `size` | `PropTypes.number`  | `90` |

### CylinderSpinLoader

##### Usage

`<CylinderSpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.1` |
| `size` | `PropTypes.number`  | `25` |

### ResizeSpinLoader

##### Usage

`<ResizeSpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `background` | `PropTypes.string`  | `#000` |
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `2` |
| `size` | `PropTypes.number`  | `11` |

### RotateSpinLoader

##### Usage

`<RotateSpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.1` |
| `size` | `PropTypes.number`  | `10` |

### SpinLoader

##### Usage

`<SpinLoader />`

##### Properties

| Name | Type | Default |
|---|---|---|
| `background` | `PropTypes.string`  | `#fff` |
| `color` | `PropTypes.string`  | `#000` |
| `duration` | `PropTypes.number`  | `1.4` |
| `size` | `PropTypes.number`  | `10` |

## Authors

| ![Lucas Bassetti](https://avatars3.githubusercontent.com/u/1014326?v=3&s=150)|
|:---------------------:|
|  [Lucas Bassetti](https://github.com/LucasBassetti/)   |

See also the list of [contributors](https://github.com/LucasBassetti/react-css-loaders/contributors) who participated in this project.

## How to Contribute

Please check the [contributing guide](https://github.com/LucasBassetti/react-css-loaders/blob/master/contributing.md)

## License

MIT · [Lucas Bassetti](http://lucasbassetti.com.br)