React Preloaders
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 listSimplest way
import React from 'react';import Lines from 'react-preloaders'; { 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 = />;<Lines = />;
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 ="#f7f7f7" />;
For gradient background pass your gradient.
You can generate gradients here.
import Lines from 'react-preloaders'; <Lines ="linear-gradient(180deg, #f95759 0%, #a62022 100%)" />;
For blured background just pass blur.(it's now in beta)
import Lines from 'react-preloaders'; <Lines ="blur" />;
time (Number)
Time defines how long you want show preloader after page loaded.
import Lines from 'react-preloaders'; <Lines = />;
customLoading and you don't want play preloader if your loading status false you need to pass time 0
If your are usingimport Lines from 'react-preloaders'; <Lines = = />;
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 ="slide" />;<Lines ="slide-down" />;<Lines ="slide-right" />;<Lines ="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'; { state = loading: true ; } { ; } { return <React.Fragment> <YourApp /> <Lines = /> </React.Fragment> ; }
Example with hooks
import React useState useEffect from 'react';import Lines from 'react-preloaders'; { const loading setLoading = ; ; return <React.Fragment> <YourApp /> <Lines = /> </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 = ;const extractCSS = 'style.[hash].css'; moduleexports = plugins: extractCSS module: rules: test: /\.css$/ use: extractCSS ;
Extract ( webpack 4.x )
const MiniCssExtractPlugin = ;moduleexports = plugins: // 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: MiniCssExtractPluginloader options: // you can specify a publicPath here // by default it use publicPath in webpackOptions.output publicPath: '../' 'css-loader' ;