react-flexy-loader

most easy to use react loader

install

npm install react-flexy-loader

live demo

https://react-flexy-loader.netlify.app/

usage

import react-flexy-loader and add show props

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show />
}
 
export default App

if you want to change alpha value just pass it

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show alpha={0.4} />
}
export default App

If you have a spinner just pass it as a child. If you do that default spinner will be removed and new spinner replace it. For example if you want to use bootstrap spinner just pass it and spinner will be changed.

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
import { Spinner } from 'react-bootstrap'
 
const App = () => {
  return (
    <ReactFlexyLoader show>
      <Spinner animation='grow' variant='primary' />
    </ReactFlexyLoader>
  )
}
export default App

you can pass anything you want as a spinner. Child component will be centered on the div.

import ReactFlexyLoader from "react-flexy-loader"
import "react-flexy-loader/dist/index.css"
import { Spinner} from "react-bootstrap"
 
const App = ()=>{
return <ReactFlexyLoader show>
    <div>
    <h4>Loading...<h4>
    </div>
</ReactFlexyLoader>
}
export default App;

if you want to make behind the loader non clickable you can pass pointerEvents props false. like:

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show pointerEvents={false} />
}
export default App

You can also change the css position of the loader : "absolute,fixed,unset ...."

Note: if you want to move the loader when scroll downing. make position equal fixed

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show position='fixed' />
}
export default App

You can also change the location of the spinner : "bottom,middle,top"

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show location='top' />
}
export default App

you can change the z-index value if you want

import ReactFlexyLoader from 'react-flexy-loader'
import 'react-flexy-loader/dist/index.css'
 
const App = () => {
  return <ReactFlexyLoader show zIndex={9999} />
}
export default App

Props

property	type	default	description
show	Boolean	false	shows the loader
alpha	Number	0.3	alpha value of rgba
zIndex	Number	99	zIndex value of the loader
pointerEvents	Boolean	true	handle pointer events behind the loader
location	String "middle", "top","bottom"	"middle"	handle the spinner location
position	String "absolute","fixed","unset"...	"absolute"	css position of the loader