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