如何在 dbc.Spinner 加载时保持下方图片可见？

2026-11-04数据小许

可以给 html.Img 添加 style={"visibility": "visible"}。当 dbc.Spinner 通过 visibility: hidden 隐藏子内容时，图片就能在加载动画运行期间保持可见。

为什么图片会被隐藏？

图片和 html.Div(id='spinner') 都是 dbc.Spinner 的子内容。callback 更新 spinner.children 时，组件会显示加载动画，同时通过外层容器的 visibility: hidden 隐藏子内容。dbc.Spinner 源码中可以看到这一实现。

visibility 属性可以继承，但子元素可以显式设置 visibility: visible，在父容器隐藏时继续显示。因此，只需修改图片的 style。

如何修改代码？

给图片添加 style：

html.Img(
    src='https://dash.plotly.com/assets/images/plotly_logo_dark.png',
    style={'visibility': 'visible'},
)

整理缩进后的完整示例：

from dash import Dash, html, callback, Output, Input
from time import sleep
import dash_bootstrap_components as dbc

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

app.layout = html.Div([
    html.Div(
        dbc.Button('Button', id='button', size='lg', className='me-1')
    ),
    dbc.Spinner(
        [
            html.Img(
                src='https://dash.plotly.com/assets/images/plotly_logo_dark.png',
                style={'visibility': 'visible'},
            ),
            html.Div(id='spinner'),
        ],
        spinner_style={
            'min-height': '10rem',
            'min-width': '10rem',
            'margin-left': '10rem',
        },
    ),
])


@callback(
    Output('spinner', 'children'),
    Input('button', 'n_clicks'),
    prevent_initial_call=True,
)
def process(value):
    sleep(1)
    return ''


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

点击按钮后，spinner.children 在 callback 执行期间处于加载状态，加载动画会显示，图片则通过自己的 visibility 设置保持可见。callback 返回空字符串后，这次加载状态也会结束。

有哪些注意事项？

spinner_style 用于设置加载动画的样式，原代码中的尺寸和边距设置无法解决图片被隐藏的问题。

这个方法适用于父容器使用 visibility: hidden 的情况。如果项目还通过其他 CSS 设置了 display: none 或 opacity: 0，需要同时检查这些样式，因为单独设置图片的 visibility 无法抵消它们。

示例中的 sleep(1) 仅用于模拟耗时操作，实际使用时可以替换为需要执行的处理逻辑。