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 '@tkforce/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.
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.