react-spinner-overlay
TypeScript icon, indicating that this package has built-in type declarations

0.1.33 • Public • Published

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<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

Versions

Current Tags

VersionDownloads (Last 7 Days)Tag
0.1.331,148latest

Version History

VersionDownloads (Last 7 Days)Published
0.1.331,148
0.1.320
0.1.310
0.1.300
0.1.290
0.1.280
0.1.270
0.1.260
0.1.250
0.1.240
0.1.230
0.1.220
0.1.210
0.1.200
0.1.190
0.1.180
0.1.170
0.1.150
0.1.140
0.1.130
0.1.121
0.1.110
0.1.100
0.1.90
0.1.80
0.1.70
0.1.60
0.1.50
0.1.40
0.1.30
0.1.20
0.1.10

Package Sidebar

Install

npm i react-spinner-overlay

Weekly Downloads

1,149

Version

0.1.33

License

MIT

Unpacked Size

98.5 kB

Total Files

17

Last publish

Collaborators

  • okapipi