React Spinner Overlay
This project was bootstrapped with Create React App.
🚀 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<boolean>(true)
...
return (
<>
<FerrisWheelSpinner loading={loading} size={28} />
<CircleSpinnerOverlay
loading={loading}
overlayColor="rgba(0,153,255,0.2)"
/>
</>
)
B. Switch components
import { FerrisWheelSpinner } from 'react-spinner-overlay'
...
return (
<>
{loading
? <FerrisWheelSpinner loading={loading} color="#FF7626" />
: <p>loaded!</p>
}
</>
)
🎗 Props of each spinner/overlay
CircleSpinner
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 |
|
LineLoader
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 |
RingSpinner
prop |
type |
default |
note |
loading |
boolean |
true |
|
size |
number |
42 |
px |
color |
string |
#00ced1 |
|
borderWidth |
number |
2 |
px |
FerrisWheelSpinner
prop |
type |
default |
note |
loading |
boolean |
true |
|
size |
number |
32 |
px |
color |
string |
#00ced1 |
|
WindmillSpinner
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 |
RouletteSpinner
prop |
type |
default |
note |
loading |
boolean |
true |
|
size |
number |
32 |
px |
color |
string |
#00ced1 |
|
DartsSpinner
prop |
type |
default |
note |
loading |
boolean |
true |
|
size |
number |
48 |
px |
color |
string |
#00ced1 |
|
DotLoader
prop |
type |
default |
note |
loading |
boolean |
true |
|
size |
number |
12 |
px |
color |
string |
#00ced1 |
|
between |
number |
3 |
px |
BounceLetterLoader
prop |
type |
default |
note |
loading |
boolean |
true |
|
letters |
string |
Loading... |
|
color |
string |
#00ced1 |
|
animationDuration |
number |
2 |
second |
Overlay
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 |