A customizable, simple loading overlay with transitions.
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>
- 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.
- Passing in custom loader components.
- Composable loader, maybe some alternative spinner options or something.