A customizable, simple loading overlay with transitions.
Wrap your components in it and toggle the active prop as necessary.
<Loadable
active={isActive}
spinner
text='Loading your content...'
>
<p>Some content or children or something.</p>
</Loadable>- 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.