dcc.Loading Component Documentation

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
(refer to 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.

# -*- coding: utf-8 -*-
import dash
import dash_html_components as html
import dash_core_components as dcc
import time

from dash.dependencies import Input, Output

app = dash.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",
                )
            ]
        ),
    ],
)


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


@app.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_server(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.

dcc.Loading Properties

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

help(dash_core_components.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 a list of or a singular dash component, string or numbers | a 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.

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

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

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

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

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.

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

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

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

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