LoadingOverlay

Overlay over given container with centered Loader
Import
Source
View source code
Docs
Edit this page
Package
@mantine/core

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.

import { useDisclosure } from '@mantine/hooks';
import { LoadingOverlay, Button, Group, Box } from '@mantine/core';


function Demo() {
  const [visible, { toggle }] = useDisclosure(false);


  // Note that position: relative is required
  return (
    <>
      <Box maw={400} pos="relative">
        <LoadingOverlay visible={visible} overlayBlur={2} />
        {/* ...other content */}
      </Box>


      <Group position="center">
        <Button onClick={toggle}>Toggle overlay</Button>
      </Group>
    </>
  );
}

Transition duration

You can change appear and disappear animations duration by passing transitionDuration prop:

// 500ms animations
<LoadingOverlay transitionDuration={500} />


// disable animations
<LoadingOverlay transitionDuration={0} />

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:

import { LoadingOverlay } from '@mantine/core';


function Demo() {
  return (
    <LoadingOverlay
      loaderProps={{ size: 'sm', color: 'pink', variant: 'bars' }}
      overlayOpacity={0.3}
      overlayColor="#c5c5c5"
      visible
    />
  );
}

Configure default loader

You can configure default loader in MantineProvider, it will be used in Loader and LoadingOverlay components by default:

import { MantineProvider } from '@mantine/core';


function Demo() {
  return (
    <MantineProvider theme={{ loader: 'bars' }}>
      <App />
    </MantineProvider>
  );
}

Custom loader

You can use any other loader with LoadingOverlay by setting loader prop:

import { DEFAULT_THEME, LoadingOverlay } from '@mantine/core';


const customLoader = (
  <svg
    width="54"
    height="54"
    viewBox="0 0 38 38"
    xmlns="http://www.w3.org/2000/svg"
    stroke={DEFAULT_THEME.colors.blue[6]}
  >
    <g fill="none" fillRule="evenodd">
      <g transform="translate(1 1)" strokeWidth="2">
        <circle strokeOpacity=".5" cx="18" cy="18" r="18" />
        <path d="M36 18c0-9.94-8.06-18-18-18">
          <animateTransform
            attributeName="transform"
            type="rotate"
            from="0 18 18"
            to="360 18 18"
            dur="1s"
            repeatCount="indefinite"
          />
        </path>
      </g>
    </g>
  </svg>
);


function Demo() {
  return <LoadingOverlay loader={customLoader} visible />;
}
Go back
HoverCard – @mantine/core
Up next
Menu – @mantine/core

LoadingOverlay component props

NameTypeDescription
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
Build fully functional accessible web applications faster than ever
About
ContributeAbout MantineChangelogReleases
Community
Chat on DiscordFollow on TwitterFollow on GitHubGitHub discussions
Project
Mantine UIDocumentationGitHub organizationnpm organization
Built by Vitaly Rtishchev and these awesome people
Join Discord community
Follow Mantine on Twitter