## Loader  
Use Loader component to show loading state to the user.  
Category: Feedback  

### Introduction

### Simple Usage
Loader component supports 3 types of loaders: `oval`, `bars` and `dots` by default. All loaders are animated with CSS for better performance.

By default, Loader will be rendered with theme.primaryColor. A Loader can be customized with `color`, `size`, and
`type` props.

```python
import dash_mantine_components as dmc

component = dmc.Loader(color="red", size="md", type="oval")
```
### Button Example
In this example, the loader is shown while the callback is running.   Note that the button is disabled automatically when `loading=True`
See more examples in the Button section.

This examples uses the [running](https://dash.plotly.com/advanced-callbacks#updating-component-properties-when-a-callback-is-running)
argument in a callback and requires dash>=2.16.


```python
import time

import dash_mantine_components as dmc
from dash import html, Input, Output, callback

component = html.Div([
    dmc.Button("Compute", id="load-btn", loaderProps={"type": "dots"} ),
    dmc.Text(id="load-output"),
])


@callback(
    Output("load-output", "children"),
    Input("load-btn", "n_clicks"),
    running=[(Output("load-btn", "loading"), True, False)],
)
def long_compute(n):
    time.sleep(2)
    return "Done " + str(time.time())
```
### children prop

`Loader` supports children prop. If you pass anything to children, it will be rendered instead of the loader. This is 
useful when you want to control Loader representation in components that use loaderProps, for example `Button` or `LoadingOverlay`.

See an example in the [Loading Overlay](/components/loadingoverlay) section,


### 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.


#### Loader selectors

| Name        | Static selector      | Description                                      |
|:------------|:---------------------|:-------------------------------------------------|
| root        | .mantine-Loader-root | Root element                                     |


#### Loader CSS Variables

| Selector | Variable         | Description                                                         |
|----------|------------------|---------------------------------------------------------------------|
| root     | --loader-size    | Controls loader size (usually width and height, in some cases only width) |
|          | --loader-color   | Controls loader color                                              |



### Keyword Arguments
#### Loader

- children (a list of or a singular dash component, string or number; optional):
    Overrides default loader with given content.

- 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.

- color (optional):
    Key of `theme.colors` or any valid CSS color, default value is
    `theme.primaryColor`.

- 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`.

- 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.

- size (number; optional):
    Controls `width` and `height` of the loader. `Loader` has
    predefined `xs`-`xl` values. Numbers are converted to rem. Default
    value is `'md'`.

- 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.

- type (a value equal to: 'bars', 'dots', 'oval'; optional):
    Loader type, key of `loaders` prop, default value is `'oval'`.

- variant (string; optional):
    variant.

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