react-flexy-loader v1.1.2
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 |