React Preloaders Plugin
it's fastest way to add nice preloader to your application.
vamosgs.github.io/react-preloaders
Setup
Install it:
npm install react-preloaders --save
or
yarn add react-preloaders --save
Get Started
here.
find full preloaders listimport React from "react";
import Lines from "react-preloaders/Preloaders/Lines";
class App extends Component {
render() {
return (
<React.Fragment>
<Lines
color={"#f7f7f7"} //Default #2D2D2D
bgColor={"#222"} //Default #F7F7F7
time={1400} //Default #1300
/>
<YourApp />
</React.Fragment>
);
}
}
CSS loading
Packages you nee
style-loader css-loader
more if you want to extract css you need
extract-text-webpack-plugin
Add this to your webpack if you don't have css loader yet
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
Extract
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']),
}
]
}
}
Properties (Props)
Props -> | Color | bgColor | Time |
---|---|---|---|
type | String(rgb, hex ...) | String(rgb, hex ...) | Number(Milliseconds) |
Default Value | #2D2D2D | #F7F7F7 | 1300ms |