## color (String)
Color (hex, rgb, rgba) defines preloaders main color.
```jsx
import { Lines } from 'react-preloaders';
;
;
```
## background (String)
Background can be just color (hex, rgb), gradient or blured.
For just colored background pass color(hex, rgb, rgba).
```jsx
import { Lines } from 'react-preloaders';
;
```
For gradient background pass your gradient.
You can generate gradients [here](https://cssgradient.io/).
```jsx
import { Lines } from 'react-preloaders';
;
```
For blured background just pass blur.(it's now in beta)
```jsx
import { Lines } from 'react-preloaders';
;
```
## time (Number)
Time defines how long you want show preloader after page loaded.
```jsx
import { Lines } from 'react-preloaders';
;
```
### If your are using [customLoading](#customLoading) and you don't want play preloader if your loading status false you need to pass time 0
```jsx
import { Lines } from 'react-preloaders';
;
```
## animation (String)
Now you can choose preloader closing animation, in this version available just 2 animations fade and slide.
By default preloader will close with fade animation.
#### For slide animation you can choose direction.
```jsx
import { Lines } from 'react-preloaders';
;
;
;
;
```
## customLoading (Boolean)
If in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status.
```jsx
import React, { Component } from 'react';
import { Lines } from 'react-preloaders';
class App {
constructor() {
state = {
loading: true
};
}
componentDidMount() {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
setState({ loading: false });
})
.catch(err => {
setState({ loading: false });
});
}
render() {
return (
);
}
}
```
### Example with hooks
```jsx
import React, { useState, useEffect } from 'react';
import { Lines } from 'react-preloaders';
function App() {
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/todos/1')
.then(response => response.json())
.then(json => {
setLoading(false);
})
.catch(err => {
setLoading(false);
});
}, []);
return (
);
}
```
#### CSS loading (under v3.x.x) methods for old versions
Packages you need
```bash
style-loader css-loader
```
more if you want to extract css you need
#### Extract ( webpack 3.x )
```bash
extract-text-webpack-plugin
```
#### Extract ( webpack 4.x )
```bash
mini-css-extract-plugin
```
#### Add this to your webpack if you don't have css loader yet
```js
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
```
#### Extract ( webpack 3.x )
```js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('style.[hash].css');
module.exports = {
plugins: [extractCSS],
module: {
rules: [
{
test: /\.css$/,
use: extractCSS.extract(['css-loader', 'postcss-loader'])
}
]
}
};
```
#### Extract ( webpack 4.x )
```js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: '[name].css',
chunkFilename: '[id].css'
})
],
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
}
},
'css-loader'
]
}
]
}
};
```