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.

• The callback for the first Input demonstrates the basic usage with a default spinner component.
• The callback for the second Input shows how even nested children will set the loading state of the wrapped component.
• There are 5 built-in spinner types. The dcc.Loading that wraps the second Input uses type="circle"

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.