Show Loading Spinner Over Graph

Dash Python
1

Hey all,

I’ve created an app which plots data based on user selections. I’ve wrapped the dcc.Graph component with a dcc.Loading component to give the user visual feedback while the app grabs data from a callback function. The default behavior of the Loading component is to hide the children - in my case the graph - and show a spinner in its place until the new data is returned from the callback. Is there a way to not hide the background, and possibly blur it, until data is returned? I think having a graph that disappears and appears every time a change is requested is distracting.

Thanks in advance for your help.

1 Like
2

Hi @ajrehl1,

yes, this can be done. Since Dash v1.15, the dcc.Loading component has additional properties parent_className and parent_style. Using these properties, you can define the CSS properties of a Div that wraps the Loading component.

To get transparent background of the Loading component, you can do this:

dcc.Loading(
    parent_className='loading_wrapper',
    children=[...]
)

and then in your assets/custom.css, you define the CSS behaviour of the loading_wrapper class:

/* dcc.Loading component with transparent background */
/* this defines a style for a Loading component with parent_className='loading-wrapper' */
.loading_wrapper > div {
    visibility: visible !important;
}
4 Likes
3

Thanks a bunch @sislvacl. Worked like a charm.

1 Like