Here’s a simple example that wraps the outputs for a couple of
components in the
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
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.
Please also check out this section on loading states if you want a more customizable experience.
Access this documentation in your Python terminal with:
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’.