dcc.Loading

The dcc.Loading component displays a customizable loading spinner until the wrapped component has rendered.

Examples

Basic Loading

Here’s a simple example where the Loading component wraps the outputs for a couple of Input components.

Delay Show and Delay Hide

To prevent the spinner from quickly flashing during rapid loading times, adjust the delay_show and delay_hide properties.

delay_show: time delay (in ms) after the wrapped components enter the loading state and before the spinner is shown.

delay_hide: the minimum time (in ms) the spinner is displayed after it’s shown.

In this example, the callback takes about 100 milliseconds.

Try the following:
- Press the Load button with both delays at 0. Notice the spinner briefly appearing.
- To prevent showing the spinner, increase delay_show to 500
- To extend the time the spinner is visible, increase delay_hide to 500 or more and set delay_show to 0.

Loading Overlay Style

By default, the spinner hides the wrapped component during loading. To make the wrapped component visible and blur the
content, you can set the following CSS in the overlay_style prop:

dcc.Loading(    
    overlay_style={"visibility":"visible", "filter": "blur(2px)"},
    # other properties
)

Custom Spinner Component

Instead of using one of the built-in spinners, you can use a Dash component as the spinner. This example sets the
custom_spinner property to a component that includes a spinner from the Dash Bootstrap Components library, but you can use
any components to set the custom_spinner prop.

Note that the type, fullscreen, debug, color, style and className properties are specific to the built-in spinner types and do
not work with custom spinner components.
-

Target Components

Use the target_components property to specify which component id and component property combinations it wraps can trigger the
loading spinner. The spinner component is displayed only when one of the target component and properties enters
loading state.

target_components is a dictionary where the key is the component id, and the value is the property name, or a list of property names or “*”

For example, this will display the spinner only when the AgGrid’s rowData property is being updated.

app.layout=dcc.Loading(
    html.Div([
        dag.AgGrid(id="grid"),
        html.Div(id="output-div")
    ]),
    target_components={"grid": "rowData" }
)

This will display the spinner while any of the grid’s properties are being updated:

target_components ={"grid": "*"}

This will display the spinner when either the grid’s rowData or columnDefs are being updated:

target_components ={"grid": ["rowData", "columnDefs"]}

In this example, the dcc.Loading component wraps two callback outputs, but only one triggers the spinner.

Manually Display Loading Spinner

Use the display property to manually display or hide the loading spinner. Set to “show”, “hide” or “auto” (the default).


Please also check out this section on loading states if you want a more customizable experience.

Limitations

Updating component properties with set_props in a callback does not update the loading state and is not compatible with the dcc.Loading component.

Loading Properties

Access this documentation in your Python terminal with:
```python

help(dash.dcc.Loading)
```

Our recommended IDE for writing Dash apps is Dash Enterprise’s
Data Science Workspaces,
which has typeahead support for Dash Component Properties.
Find out if your company is using
Dash Enterprise
.

children (list of list of or a singular dash component, string or numbers | list of or a singular dash component, string or number; optional):
Array that holds components to render.

id (string; optional):
The ID of this component, used to identify dash components in
callbacks. The ID needs to be unique across all of the components in
an app.

type (a value equal to: ‘graph’, ‘cube’, ‘circle’, ‘dot’ or ‘default’; default 'default'):
Property that determines which built-in spinner to show one of
‘graph’, ‘cube’, ‘circle’, ‘dot’, or ‘default’.

fullscreen (boolean; optional):
Boolean that makes the built-in spinner display full-screen.

debug (boolean; optional):
If True, the built-in spinner will display the component_name and
prop_name while loading.

className (string; optional):
Additional CSS class for the built-in spinner root DOM node.

parent_className (string; optional):
Additional CSS class for the outermost dcc.Loading parent div DOM node.

style (dict; optional):
Additional CSS styling for the built-in spinner root DOM node.

parent_style (dict; optional):
Additional CSS styling for the outermost dcc.Loading parent div DOM
node.

overlay_style (dict; optional):
Additional CSS styling for the spinner overlay. This is applied to the
dcc.Loading children while the spinner is active. The default is
{'visibility': 'hidden'}.

color (string; default '#119DFF'):
Primary color used for the built-in loading spinners.

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

loading_state is a dict with keys:

  • component_name (string; optional):
    Holds the name of the component that is loading.

  • is_loading (boolean; optional):
    Determines if the component is loading or not.

  • prop_name (string; optional):
    Holds which property is loading.

display (a value equal to: ‘auto’, ‘show’ or ‘hide’; default 'auto'):
Setting display to “show” or “hide” will override the loading state
coming from dash-renderer.

delay_hide (number; default 0):
Add a time delay (in ms) to the spinner being removed to prevent
flickering.

delay_show (number; default 0):
Add a time delay (in ms) to the spinner being shown after the
loading_state is set to True.

show_initially (boolean; default True):
Whether the Spinner should show on app start-up before the loading
state has been determined. Default True. Use when also setting
delay_show.

target_components (dict with strings as keys and values of type string | list of strings; optional):
Specify component and prop to trigger showing the loading spinner
example: {"output-container": "children", "grid": \["rowData", "columnDefs\]}.

custom_spinner (list of or a singular dash component, string or number; optional):
Component to use rather than the built-in spinner specified in the
type prop.