如何在dbc.Spinner中使用spinner_style？含自定义定位实现需求

要实现类似start-20的自定义定位，你可以通过spinner_style直接设置内联CSS的left属性，配合Bootstrap的定位基础类来完成。以下是具体实现：

核心代码示例 #

dbc.Spinner(
    # 加载状态下显示的内容
    children=["加载中..."],
    # 保留基础定位类，移除原有的start-50
    spinner_class_name="position-absolute top-0",
    # 自定义left偏移，同时添加transform实现元素自身居中（和start-*类逻辑一致）
    spinner_style={"left": "20%", "transform": "translateX(-50%)"}
)

代码说明 #

• 移除spinner_class_name中的start-50，改用内联样式自定义偏移值
• left: "20%" 对应你想要的start-20效果，直接将元素左侧偏移设为父容器宽度的20%
• transform: "translateX(-50%)" 是关键：Bootstrap的start-*类默认自带这个属性，能让元素自身中心对齐到left设定的位置，而非元素左边缘对齐

其他spinner_style用法示例 #

你还可以用spinner_style修改加载器的大小、颜色等样式：

dbc.Spinner(
    children=["加载中..."],
    spinner_class_name="position-absolute top-50 start-50 translate-middle",
    spinner_style={"width": "4rem", "height": "4rem", "color": "#2563eb"}
)

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