如何增大Dash Plotly中dcc.Loading组件的加载圆圈尺寸

你可以通过以下几种方式调整dcc.Loading组件中圆圈加载动画的尺寸：

方法一：使用CSS自定义样式（推荐） #

Dash的Loading组件默认通过内置CSS类控制spinner样式，你可以通过自定义CSS覆盖默认尺寸：

1. 在应用的layout中添加html.Style组件，写入全局自定义样式：

import dash_core_components as dcc
import dash_html_components as html

app.layout = html.Div([
    html.Style("""
        /* 针对所有circle类型的Loading组件 */
        .dash-loading-circular {
            width: 100px !important;
            height: 100px !important;
        }
        .dash-loading-circular > div {
            width: 100px !important;
            height: 100px !important;
            border-width: 8px !important; /* 可选：调整圆圈边框厚度，保持视觉比例 */
        }
    """),
    html.Div(id='timer-output'),
    dcc.Loading(
        dcc.Graph(id="scatter-plot"),
        type="circle",
        style={'filter': 'blur(0px)'},
    ),
], style={'margin-left': '30%', 'width': '70%', 'margin-right': '90px', 'margin-top': '80px'})

2. 如果只想调整特定Loading组件的尺寸，给目标组件添加className，再针对性写CSS：

dcc.Loading(
    dcc.Graph(id="scatter-plot"),
    type="circle",
    className="large-scatter-spinner",
    style={'filter': 'blur(0px)'},
)

对应的CSS样式：

.large-scatter-spinner .dash-loading-circular {
    width: 120px !important;
    height: 120px !important;
}
.large-scatter-spinner .dash-loading-circular > div {
    width: 120px !important;
    height: 120px !important;
    border-width: 10px !important;
}

方法二：使用transform缩放快速调整 #

如果不想编写CSS，可以通过父容器的transform: scale()属性直接放大加载圆圈：

html.Div([
    html.Div(id='timer-output'),
    html.Div(
        dcc.Loading(
            dcc.Graph(id="scatter-plot"),
            type="circle",
            style={'filter': 'blur(0px)'},
        ),
        style={'transform': 'scale(1.8)', 'transform-origin': 'center'} /* scale值越大，圆圈尺寸越大 */
    ),
], style={'margin-left': '30%', 'width': '70%', 'margin-right': '90px', 'margin-top': '80px'})

注意事项 #

• 使用!important是为了覆盖Dash内置CSS的优先级，确保自定义样式生效。
• 调整尺寸时，建议同步修改border-width，保持加载圆圈的视觉比例协调。

内容的提问来源于stack exchange，提问作者Abhishek Pandey