Fixed Position for dcc.Loading Animation

Dash Python
1

The loading animation of dcc.Loading is always shown in the center of the height and width of the previous element that it contained.

If the previous contained element has a height taller than double the screen height, the loading animation disappears below the visible space. The code example below demonstrates this issue.

To avoid this, is it possible to add a fixed height to dcc.Loading while it is showing the animation?

from dash import Dash, dcc, html, Input, Output, callback
import plotly.express as px
import time

app = Dash(__name__)


@callback(
    Output("div", "children"),
    Input("button", "n_clicks"),
    prevent_initial_call=True,
)
def f(n_clicks):
    time.sleep(1)
    height = 500 + n_clicks % 2 * 3000
    fig = px.scatter(
        px.data.iris(), 
        x="sepal_length", 
        y="sepal_width", 
        height=height,
    )
    return dcc.Graph(figure=fig)


app.layout = html.Div(
    [
        html.Button("Update", id="button"),
        dcc.Loading(html.Div("Click button to generate output", id="div")),
    ]
)


if __name__ == "__main__":
    app.run(debug=False)
2

Hi @ajm I think for your use-case, I would just set fullscreen=True.

I’m not sure how to position the loading element in the center of the display instead of in the center of the target component.

You could also switch to the dbc.Spinner() which let’s you control the fullscreen style via the fullscreen_style property.

https://dash-bootstrap-components.opensource.faculty.ai/docs/components/spinner/