Place dcc.Loading over/inside child?

Dash Python
1

Is it possible to place a dcc.Loading spinner exactly over or inside the child div?
In my example, I’d like the child Button to still be visible (parent_style={"visibility": "visible !important"}) and the circle spinner on top of it, so that it looks like as if it’d be in it. This does not work with style={"position": "relative"} because it targets the dcc.Loading component and not it’s parent div that sets the position properties,


from dash import Dash, html, dcc, callback
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc

app = Dash(__name__)

app.layout = html.Div([
    dcc.Loading(
        className="loading-custom",
        children=dbc.Button("Click me", id="button"),
        type="circle",
        parent_style={"visibility": "visible !important"},
        style={"position": "relative"}
    )
])


@callback(
    Output("button", "children"),
    Input("button", "n_clicks"),
    prevent_initial_call=True
)
def load(n):
    while True:
        pass
    return "Clicked"


if __name__ == '__main__':
    app.run_server(debug=True)
3

Hi @luggie

You can try some of the new features for dcc.Loading available in dash 2.17.0

app.layout = html.Div([
    dcc.Loading(
        className="loading-custom",
        children=dbc.Button("Click me", id="button"),
        type="circle",
        overlay_style={"visibility": "visible", "display": "inline-block"}
    )
])

https://dash.plotly.com/dash-core-components/loading

2 Likes