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.