React Spinner Overlay

This project was bootstrapped with Create React App.

!スクリーンショット 2021-11-16 22 44 19

🚀 Demo

Demo page

---

💫 Installation

yarn:
``
yarn add react-spinner-overlay
`

npm:
`
npm install react-spinner-overlay
`

---

📌 Usage

There are mainly two usages. You have to prepare loading boolean state or boolean variables.

A. Pass loading(boolean) prop to spinner
`
import { CircleSpinnerOverlay, FerrisWheelSpinner } from 'react-spinner-overlay'

...

const [loading, setLoading] = useState(true)

...

return (
<>

　　loading={loading}
overlayColor="rgba(0,153,255,0.2)"
/>

)

`

B. Switch components
`

import { FerrisWheelSpinner } from 'react-spinner-overlay'

...

return (
<>
{loading
?
:

loaded!


}

)
`

---

🎗 Props of each spinner/overlay

$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 42 | px |
| color | string | #00ced1 | |
| innerBorderWidth | number | 6 | |
| outerBorderWidth | number | 1 | |
| innerBorderOpacity | number | 1 | |
| outerBorderOpacity | number | 1 | |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| width | number | 60 | px |
| height | number | 4 | px |
| color | string | #00ced1 | |
| bgOpacity | number | 0.3 | |
| borderRadius | number | 10 | px |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 42 | px |
| color | string | #00ced1 | |
| borderWidth | number | 2 | px |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 32 | px |
| color | string | #00ced1 | |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 40 | px |
| color | string | #00ced1 | |
| borderWidth | number | 4 | px |
| borderHeight | number | 10 | px |
| borderRadius | number | 8 | px |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 32 | px |
| color | string | #00ced1 | |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 48 | px |
| color | string | #00ced1 | |




$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| size | number | 12 | px |
| color | string | #00ced1 | |
| between | number | 3 | px |

$3

| prop | type | default | note |
| --- | --- | --- | --- |
| loading | boolean | true | |
| letters | string | Loading... | |
| color | string | #00ced1 | |
| animationDuration | number | 2 | second |




$3


All overlays (BounceLetterLoaderOverlay, CircleSpinnerOverlay, DartsSpinnerOverlay, DotLoaderOverlay, FerrisWheelSpinnerOverlay, LineLoaderOverlay, RouletteSpinnerOverlay, RingSpinnerOverlay, WindmillSpinnerOverlay) have their own spinner props, plus the following props.


| prop | type | default |
| --- | --- | --- |
| overlayColor | string | rgb(255 255 255 / 80%) |
| message | string or JSX.Element | |
| zIndex | number | 500` |