Skip to content

[BUG] Fix overlay_style in dcc.Loading #2858

@AnnMarieW

Description

@AnnMarieW

dash>= 2.17.0

The overlay_style prop in dcc.Loading should apply only to the background and not the spinner component. You can see it in the docs - here is the example:

This could be tagged as a "Good First Issue". If someone doesn't get to it first, I think I can fix it 🙂

import time

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

app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    [
        dbc.Button("Start", id="loading-overlay-button", n_clicks=0),
        dcc.Loading(
            [dbc.Alert("My Data", id="loading-overlay-output", className="h4 p-4 mt-3")],
            overlay_style={"visibility":"visible", "filter": "blur(2px)"},
            type="circle",
        ),
    ]
)


@callback(
    Output("loading-overlay-output", "children"),
    Input("loading-overlay-button", "n_clicks"),
)
def load_output(n):
    if n:
        time.sleep(1)
        return f"Data updated {n} times."
    return no_update

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugsomething brokensev-2serious problem

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions