armved / react-preloaders

🌌Package for adding preloaders to your apps

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

find full preloaders list here.

import 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