LoadingOverlay
Usage
Use LoadingOverlay to overlay element to disable interactions and indicate loading state. Note that elements under overlay are still focusable with keyboard. Remember to add additional logic to handle this case.
Overlay has absolute position and will take 100% of width and height of nearest parent container with relative position. Use it when you need to disable user interactions and indicate loading state, for example, while form is submitting.
visible
is the only required prop, if it set to false component will not render anything.
Transition duration
You can change appear and disappear animations duration by passing transitionDuration
prop:
Loader and Overlay props
LoadingOverlay is built using Overlay and Loader components. You can change all props of Loader component, opacity and color of Overlay:
Configure default loader
You can configure default loader in MantineProvider, it will be used in Loader and LoadingOverlay components by default:
Custom loader
You can use any other loader with LoadingOverlay by setting loader
prop:
LoadingOverlay component props
Name | Type | Description |
---|---|---|
exitTransitionDuration | number | Exit transition duration in ms |
keepMounted | boolean | If set loading overlay will not be unmounted from the DOM when it is hidden, display: none styles will be added instead |
loader | ReactNode | Provide custom loader |
loaderProps | LoaderProps | Loader component props |
overlayBlur | string | number | Sets overlay blur |
overlayColor | string | Sets overlay color, defaults to theme.white in light theme and to theme.colors.dark[5] in dark theme |
overlayOpacity | number | Sets overlay opacity |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, 0 by default |
transitionDuration | number | Animation duration in ms |
visible * | boolean | If visible overlay will take 100% width and height of first parent with relative position and overlay all of its content |
zIndex | ZIndex | Loading overlay z-index |