Loading Component with Transparent Overlay

Dash Python
1

I would like to have a loading spinner overlay my graph (without hiding the graph) while the graph is loading. Is there a way to make the Loading component have a transparent background/not hide the underlying children?

I tried setting the style but no luck:
dcc.Loading(id=‘summary_card_loading’, type=‘circle’, style={‘background-color’:‘transparent’}, children=[dcc.Graph(id=‘completion_rate_figure’)])

Thanks!

1 Like
2

It should be:

style={‘backgroundColor’: ‘transparent’}

3

Hi @lynchbp1, did you manage to solve this problem?

4

If you look at the DOM in the browser (e.g., Ctrl+Shift+C in Firefox) while the loading animation is displaying, you’ll see that a <div> element is placed around the content that are the children of the dcc.Loading component. If you inspect its style, it has visibility=hidden set. This <div> unfortunately has no id or class and the visibility property seems to be set inline, probably from some Javascript. But we want to set visibility=visible on it. So in your app, put a <div> around the dcc.Loading component like so:

html.Div(id="loader-wrapper",children=[
    dcc.Loading(
        children=[...]
   )
])

Then in a css file in the assets/ folder of your app, e.g.,
assets/style.css, put the following:

#loader-wrapper > div {
    visibility: visible !important;
}

This says to address all the children of #loader-wrapper that are <div> elements (there will only be the one created by the dcc.Loading component), and set (by force) their visibility to “visible”.
You can use this without worrying about accidentally addressing another child <div> after the loading is finished because after this loading is finished, the <div> stays there but its style is set to nothing and so will just consist of visibility=visible as stated in the style.css file we created.

3 Likes
5

Thank you @nickest for the provided solution! It works exactly as you described.

In case someone needs to use the loader-wrapper on multiple dcc.Loading components in a single app, it is better to define it as a div class rather than div id…

html.Div(className="loader-wrapper",children=[
   dcc.Loading(
       children=[...]
  )
])

.loader-wrapper > div {
    visibility: visible !important;
}
4 Likes
6

@sislvacl @nickest Both solutions does not work for me. Maybe im doing something wrong. The children of my Loading component is a DataTable. In my callback the output is the data of the datatable. The loading bars are visible but not the datatable. the datatable is visible when loading is finished(callback returns). I put the loader-warpper to theh assets.css. What im doing wrong? Best regards!

7

Hi @Varlor

can you please try what is described here?

1 Like
8

Ah thanks @sislvacl . I will try it as soon as I upgrade from 1.9 to 1.15

9

@sislvacl Works perfectly. Thanks!

1 Like