reactloading-spinner-full

0.0.2 • Public • Published

Loading Overlay

npm version

forked from derrickpelletier/react-loading-overlay

A customizable, simple loading overlay with transitions.


Usage

Wrap your components in it and toggle the active prop as necessary.

import LoadingOverlay from 'react-loading-overlay';
 
<LoadingOverlay
  active={isActive}
  spinner
  text='Loading your content...'
  >
  <p>Some content or children or something.</p>
</LoadingOverlay>

props

  • active, Boolean, whether the loader is visible.
  • animate, Boolean, whether to fade the overlay in and out.
  • spinner, Boolean, whether to use a spinner in the loader.
  • text, String, used as content of the loader.
  • background, String, valid css color declaration for the overlay background.
  • position, String, valid css position declaration for the overlay element.
  • color, String, valid css color declaration for the text and circle color.
  • spinnerSize, String, valid css size (100px) for the size of the spinner circle.
  • zIndex, Integer, use in case you are experiencing other z-indexed components appearing over top of the overlay.
  • onClick, Function, triggered when the overlay is clicked.

Future

  • Passing in custom loader components.
  • Composable loader, maybe some alternative spinner options or something.

Package Sidebar

Install

npm i reactloading-spinner-full

Weekly Downloads

0

Version

0.0.2

License

none

Unpacked Size

506 kB

Total Files

13

Last publish

Collaborators

  • dhanist