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