A react component that support you make a loading style when loading status. Loading component is use react-loading.
npm i react-cover
or
yarn add react-cover
Just use on props to toggle loading
import Cover from 'react-cover'
const LoadingButton = ({ on = false }) => (
<Cover on={on}>
<button>COVER</button>
</Cover>
)change style color or type
import Cover from 'react-cover'
const LoadingButton = ({ on = false }) => (
<Cover on={on} color="red" type="balls">
<button>COVER</button>
</Cover>
)if your element is in style width 100% you can use fullwidth prop
import Cover from 'react-cover'
const FullWidthComponent = ({ on = false }) => (
<Cover on={on} fullwidth>
<div style="width:100%;">some thine fullwidth</div>
</Cover>
)| Name | Type | Default | Description |
|---|---|---|---|
| on | boolean | false | switch this component active |
| opacity | string|number | 0.4 | opacity for covered element |
| color | string | '#333' | control loading color |
| type | string | 'spin' | control loading type of react-loading loading type |
| size | number | 32 | control loading size |
| loadingProps | object | {} | react-loading's props |
| coverAdornment | jsx function | - | custom your loading style replace react-loading |
| inline | boolean | false | if children is display inline add this prop |
| cursor | string | initial | control your cursor style when active |