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 |