React Preloaders

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.

Simplest way

import React from 'react';
import { Lines } from 'react-preloaders';

function App() {
  return (
    <React.Fragment>
      <YourApp />
      <Lines />
    </React.Fragment>
  );
}

Your components as preloader

Here is example how you can use your components as prelaoder:

import React from 'react';
import { CustomPreloader } from 'react-preloaders';

function App() {
  return (
    <React.Fragment>
      <YourApp />
         <CustomPreloader>
                 YOUR CUSTOM PRELOADER COMPONENT
         </CustomPreloader>
    </React.Fragment>
  );
}

Properties (Props)

Prop	type	Default value
color	String(hex, rgb,...)	#2D2D2D
background	String(blur, gradient...)	#F7F7F7
time	Number(Milliseconds)	1300ms
animation	String(fade, slide...)	fade
customLoading	Boolean	undefined

color (String)

Color (hex, rgb, rgba) defines preloaders main color.

import { Lines } from 'react-preloaders';

<Lines color={'#f7f7f7'} />;
<Lines color={'rgb(158, 38, 102)'} />;

background (String)

Background can be just color (hex, rgb), gradient or blured. For just colored background pass color(hex, rgb, rgba).

import { Lines } from 'react-preloaders';

<Lines background="#f7f7f7" />;

For gradient background pass your gradient.

You can generate gradients here.

import { Lines } from 'react-preloaders';

<Lines background="linear-gradient(180deg, #f95759 0%, #a62022 100%)" />;

For blured background just pass blur.(it's now in beta)

import { Lines } from 'react-preloaders';

<Lines background="blur" />;

time (Number)

Time defines how long you want show preloader after page loaded.

import { Lines } from 'react-preloaders';

<Lines time={1800} />;

If your are using customLoading and you don't want play preloader if your loading status false you need to pass time 0

import { Lines } from 'react-preloaders';

<Lines customLoading={loading} time={0} />;

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.

import { Lines } from 'react-preloaders';

<Lines animation="slide" />;
<Lines animation="slide-down" />;
<Lines animation="slide-right" />;
<Lines animation="slide-left" />;

customLoading (Boolean)

If in your app somthing loads async you can use preloaders too. For customLoading you need to pass your loading status.

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 (
      <React.Fragment>
        <YourApp />
        <Lines customLoading={loading} />
      </React.Fragment>
    );
  }
}

Example with hooks

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 (
    <React.Fragment>
      <YourApp />
      <Lines customLoading={loading} />
    </React.Fragment>
  );
}

CSS loading (under v3.x.x) methods for old versions

Packages you need

style-loader css-loader

more if you want to extract css you need

Extract ( webpack 3.x )

extract-text-webpack-plugin

Extract ( webpack 4.x )

mini-css-extract-plugin

Add this to your webpack if you don't have css loader yet

{
  test: /\.css$/,
  use: [ 'style-loader', 'css-loader' ]
}

Extract ( webpack 3.x )

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 )

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'
        ]
      }
    ]
  }
};