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

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

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

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.

loading_state (dict; optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys ‘is_loading’, ‘prop_name’, ‘component_name’. Those keys have the following types:

  • is_loading (boolean; optional): Determines if the component is loading or not
  • prop_name (string; optional): Holds which property is loading
  • component_name (string; optional): Holds the name of the component that 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’.