‚̧Nupital Pomp Mesmerises

    react-preloaders

    3.0.3¬†‚Äʬ†Public¬†‚Äʬ†Published

    React Preloaders

    React Preloaders

    npm npm bundle size Travis (.org) branch npm downloads NPM

    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>
      );
    }

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

    Install

    npm i react-preloaders

    DownloadsWeekly Downloads

    521

    Version

    3.0.3

    License

    MIT

    Unpacked Size

    71.8 kB

    Total Files

    89

    Last publish

    Collaborators

    • avatar