## LoadingOverlay  
Use LoadingOverlay component to disable user interactions and indicate loading state.  
Category: Feedback  

### Simple Usage

`LoadingOverlay` renders an overlay with a loader over the parent element with relative position.
It is usually used to indicate loading state of forms.

`LoadingOverlay` rendering is controlled by `visible` prop:

```python
import time

import dash_mantine_components as dmc
from dash import Output, Input, no_update, callback, clientside_callback
from dash_iconify import DashIconify

component = dmc.Box(
    children=[
        dmc.Stack(
            pos="relative",
            p=5,
            w=300,
            children=[
                dmc.LoadingOverlay(
                    visible=False,
                    id="loading-overlay",
                    overlayProps={"radius": "sm", "blur": 2},
                    zIndex=10,
                ),
                dmc.TextInput(
                    label="Username",
                    placeholder="Your username",
                    leftSection=DashIconify(icon="radix-icons:person"),
                    id="dummy-text-box",
                ),
                dmc.TextInput(
                    label="Password",
                    placeholder="Your password",
                    leftSection=DashIconify(icon="radix-icons:lock-closed"),
                ),
                dmc.Checkbox(
                    label="Remember me",
                    checked=True,
                ),
                dmc.Button(
                    "Login", id="load-button", variant="outline", fullWidth=True
                ),
            ],
        ),
    ]
)

clientside_callback(
    """
    function updateLoadingState(n_clicks) {
        return true
    }
    """,
    Output("loading-overlay", "visible", allow_duplicate=True),
    Input("load-button", "n_clicks"),
    prevent_initial_call=True,
)


@callback(
    Output("dummy-text-box", "children"),
    Output("loading-overlay", "visible"),
    Input("load-button", "n_clicks"),
    prevent_initial_call=True,
)
def update(n_clicks):
    time.sleep(3)
    return no_update, False
```
### Loader Props

```python
import dash_mantine_components as dmc

component = dmc.Box(
    [
        dmc.LoadingOverlay(
            loaderProps={"type": "bars", "color": "red", "size": "lg"},
            overlayProps={"radius": "sm", "blur": 2},
            visible=True,
            zIndex=10,
        ),
        dmc.BackgroundImage(
            dmc.Box(h=200, w=100),
            src="https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-1.2.1&ixid"
            "=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=720&q=80",
        ),
    ],
    pos="relative",
)
```
### Custom LoadingOverlay

`loaderProps` (dict) - Supports a key of "variant" with values of oval, bars, dots or custom as in this example, also custom supports a children key as in this dmc.Image with a custom .gif loading screen.

```python
import dash_mantine_components as dmc
import random

# Generate random data for the BarChart
data = [
    {
        "month": month,
        "Smartphones": random.randint(50, 300),
        "Laptops": random.randint(30, 200),
        "Tablets": random.randint(20, 150),
    }
    for month in ["January", "February", "March", "April", "May", "June"]
]

component = dmc.Box(
    children=[
        dmc.Stack(
            pos="relative",
            p=10,
            children=[
                dmc.LoadingOverlay(
                    visible=True,
                    id="custom-loading-overlay",
                    zIndex=10,
                    loaderProps={
                        "variant": "custom",
                        "children": dmc.Image(
                            h=150,
                            radius="md",
                            src="/assets/custom_loadingoverlay.gif",
                        ),
                    },
                    overlayProps={"radius": "sm", "blur": 2},
                ),
                dmc.BarChart(
                    h=300,
                    dataKey="month",
                    data=data,
                    type="stacked",
                    series=[
                        {"name": "Smartphones", "color": "violet.6"},
                        {"name": "Laptops", "color": "blue.6"},
                        {"name": "Tablets", "color": "teal.6"},
                    ],
                ),
            ],
        ),
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name    | Static selector                 | Description         |
|:--------|:--------------------------------|:--------------------|
| root    | .mantine-LoadingOverlay-root    | Root element        |
| overlay | .mantine-LoadingOverlay-overlay | `Overlay` component |
| loader  | .mantine-LoadingOverlay-loader  | `Loader` component  |


### Keyword Arguments
#### LoadingOverlay

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loaderProps (dict; optional):
    Props passed down to `Loader` component.

    `loaderProps` is a dict with keys:

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- overlayProps (dict; optional):
    Props passed down to `Overlay` component.

    `overlayProps` is a dict with keys:

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- transitionProps (dict; optional):
    Props passed down to `Transition` component, `{ transition:
    'fade', duration: 0 }` by default.

    `transitionProps` is a dict with keys:

- variant (string; optional):
    variant.

- visible (boolean; optional):
    Determines whether the overlay should be visible, `False` by
    default.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- zIndex (string | number; optional):
    Controls overlay `z-index`, `400` by default.