React component that uses SVG to create a collection of loaders which simulates the structure of the
content that will be loaded, similar to Facebook cards loaders. **Use the
[online tool](https://github.com/danilowoz/create-react-content-loader) to create your own custom
loader.**
If you are looking for
[React Native](https://github.com/virusvn/react-native-svg-animated-linear-gradient),
[Preact](https://github.com/bonitasoft/preact-content-loader) or
[Vue.js](https://github.com/LucasLeandro1204/vue-content-loading)
## Installation
**Using npm:**
```sh
npm i react-content-loader --save-dev
```
**Using Yarn:**
```sh
yarn add react-content-loader --save
```
## You can use it in two ways:
**Stylized:** [example](#facebook-style)
```jsx
// import the component
import ContentLoader from 'react-content-loader'
const MyLoader = () => {
return
}
```
**Or in custom mode:** [example](#custom-style)
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
your custom loaders
```jsx
// import the component
import ContentLoader, { Rect, Circle } from 'react-content-loader'
const MyLoader = () => {
return (
)
}
```
## Options
| Name | Type | Default | Description |
| ------------------- | -------- | :-------------: | --------------------------------------------------------------- |
| style | _Object_ | `null` | Ex: `{ marginTop: '50px' }` |
| type | _String_ | `facebook` | Options: `facebook`, `instagram`, `list`, `bullet-list`, `code` |
| speed | _Number_ | `2` | Animation speed |
| width | _Number_ | `400` | **viewBox** width of SVG |
| height | _Number_ | `130` | **viewBox** height of SVG |
| primaryColor | _String_ | `#f3f3f3` | Background the SVG |
| secondaryColor | _String_ | `#ecebeb` | Animation color |
| preserveAspectRatio | _String_ | `xMidYMid meet` | Aspect ratio option of SVG |
| className | _String_ | '' | Classname in the |
**Custom element options:**
| | x | y | radius | width | height |
| ---------- | -------- | -------- | -------- | :------: | :------: |
| **Rect** | _Number_ | _Number_ | _Number_ | _Number_ | _Number_ |
| **Circle** | _Number_ | _Number_ | _Number_ | – | – |
Use the [create-react-content-loader](https://github.com/danilowoz/create-react-content-loader) for
your custom loaders
## Examples
#### Facebook Style
#### Instagram Style
#### Code Style
#### List Style
#### Bullet list Style
#### Custom Style
#### Credits
[Boilerplate for creating React Npm packages with ES2015](https://github.com/juliancwirko/react-npm-boilerplate)
#### License
MIT