Python Plotly Dash自定义加载图标及GIF加载动画实现方案问询

该需求有成熟的可行实现方案，以下是两种最常用的低改造成本实现方式：

方式一：CSS覆盖原生dcc.Loading样式（推荐） #

这种方式不需要修改原有回调逻辑，仅通过样式替换即可完成自定义GIF加载效果，适配原有dcc.Loading的所有触发逻辑：

实现步骤 #

• 第一步：将准备好的GIF图放入项目根目录的assets文件夹中（Dash会自动读取该目录下的所有静态资源）
• 第二步：给目标dcc.Loading组件添加自定义类名，比如custom-loading
• 第三步：在assets目录下新建CSS文件（如custom_loading.css），覆盖原生加载样式

代码示例 #

应用代码

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import time

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.H3("编辑输入框查看自定义加载效果"),
        dcc.Input(id="custom-input", value='输入内容触发加载'),
        # 添加自定义类名的Loading组件
        dcc.Loading(
            id="custom-loading",
            children=[html.Div(id="loading-output")],
            className="custom-loading",
            # 这里type随便填，后面会被CSS覆盖
            type="default"
        )
    ],
)

@app.callback(
    Output("loading-output", "children"),
    Input("custom-input", "value"),
    prevent_initial_call=True
)
def update_output(value):
    # 模拟接口请求耗时
    time.sleep(2)
    return f"输入内容已更新为：{value}"

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

custom_loading.css 代码

.custom-loading .dash-spinner {
    /* 替换成你自己的GIF文件名 */
    background-image: url('your_loading.gif') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    /* 按需调整加载图的宽高 */
    width: 80px !important;
    height: 80px !important;
}
/* 隐藏原生的加载动画 */
.custom-loading .dash-spinner > div {
    display: none !important;
}

方式二：自定义状态控制加载显隐 #

如果需要更灵活的控制逻辑（比如添加加载文字提示、自定义加载覆盖范围），可以自己控制加载组件的显隐状态，不需要依赖原生dcc.Loading：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State
import time

app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.H3("自定义状态控制加载效果"),
        dcc.Input(id="demo-input", value='触发自定义加载'),
        # 自定义加载容器
        html.Div(
            id="custom-loading-container",
            children=[
                html.Div(id="output-content"),
                # 加载组件默认隐藏
                html.Div(
                    html.Img(src="assets/your_loading.gif", style={"width":"80px", "height":"80px"}),
                    id="loading-gif",
                    style={"display": "none", "position": "absolute", "top": "50%", "left": "50%", "transform": "translate(-50%, -50%)"}
                )
            ],
            style={"position": "relative"}
        )
    ],
)

@app.callback(
    [Output("output-content", "children"),
     Output("loading-gif", "style")],
    Input("demo-input", "value"),
    prevent_initial_call=True
)
def update_content(value):
    # 模拟业务处理耗时
    time.sleep(2)
    # 业务逻辑处理完成后返回结果，隐藏加载动画
    return f"处理完成，输入内容：{value}", {"display": "none"}

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

注意事项 #

• 确保GIF资源路径配置正确，放在assets目录下的资源直接通过/assets/文件名即可访问
• 可以通过CSS调整加载图的位置、大小、背景等样式，适配不同的页面布局

内容的提问来源于stack exchange，提问作者Agnes Lee