dcc.Loading

Here’s a simple example that wraps the outputs for a couple of Input components
in the Loading component. As you can see, you can define the type of spinner you
would like to show (see the reference table below for all possible types of spinners).

You can modify other attributes as well, such as
fullscreen=True
if you would like the spinner to be displayed fullscreen.
Notice that the Loading component traverses all of its children to find a
loading state, as demonstrated in the second callback, so that even nested
children will get picked up.

from dash import Dash, dcc, html, Input, Output, callback
import time

app = Dash(__name__)

app.layout = html.Div(
    children=[
        html.H3("Edit text input to see loading state"),
        dcc.Input(id="loading-input-1", value='Input triggers local spinner'),
        dcc.Loading(
            id="loading-1",
            type="default",
            children=html.Div(id="loading-output-1")
        ),
        html.Div(
            [
                dcc.Input(id="loading-input-2", value='Input triggers nested spinner'),
                dcc.Loading(
                    id="loading-2",
                    children=[html.Div([html.Div(id="loading-output-2")])],
                    type="circle",
                )
            ]
        ),
    ],
)


@callback(Output("loading-output-1", "children"), Input("loading-input-1", "value"))
def input_triggers_spinner(value):
    time.sleep(1)
    return value


@callback(Output("loading-output-2", "children"), Input("loading-input-2", "value"))
def input_triggers_nested(value):
    time.sleep(1)
    return value


if __name__ == "__main__":
    app.run(debug=False)

Edit text input to see loading state

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

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 spinner to show one of ‘graph’, ‘cube’,
‘circle’, ‘dot’, or ‘default’.

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

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

className (string; optional):
Additional CSS class for the 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 spinner root DOM node.

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

color (string; default '#119DFF'):
Primary colour used for the 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.