Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[BUG] Fix overlay_style in dcc.Loading #2858

Closed
AnnMarieW opened this issue May 13, 2024 · 0 comments · Fixed by #2860
Closed

[BUG] Fix overlay_style in dcc.Loading #2858

AnnMarieW opened this issue May 13, 2024 · 0 comments · Fixed by #2860

Comments

@AnnMarieW
Copy link
Collaborator

AnnMarieW commented May 13, 2024

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)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants