Loading Component with Transparent Overlay

Dash Python
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