如何通过CSS设置Dash dcc.Loading组件的type与color属性

你写的CSS不生效核心是两个认知错误：

• type不是合法CSS属性：Dash内置的dcc.Loading动画类型（dot/cube/graph等）是组件渲染阶段直接生成对应DOM结构实现的，CSS无法凭空修改DOM结构，自然不可能靠写type: cube切换动画类型。
• 你写的.dash-spinner * { display: none !important; }直接把加载动画的所有子元素全部隐藏了，自然看不到颜色、动画效果；且组件传入的color参数会直接写入子元素的内联样式，优先级高于外部CSS的普通color属性设置。

方案1：封装全局统一配置组件（最简便） #

如果只是要统一所有加载组件的type、color默认值，不需要完全自定义CSS动画，最省事的做法是封装一次全局Loading组件替代原生dcc.Loading，后续所有页面调用这个封装组件即可，不用逐个传参：

from dash import dcc

def GlobalLoading(**kwargs):
    # 全局默认配置，后续调整只改这里就行
    kwargs.setdefault('type', 'cube')
    kwargs.setdefault('color', 'hotpink')
    return dcc.Loading(**kwargs)

如果要覆盖内置spinner的颜色，不需要在组件上传color参数，删掉之前写的隐藏所有子元素的CSS规则，针对不同动画类型的内置类名写高优先级覆盖样式即可：

.dash-spinner {
  background-color: black;
  width: 3rem;
  height: 3rem;
}
/* 覆盖默认dot类型spinner颜色 */
.dash-spinner.dash-default-spinner path {
  fill: hotpink !important;
}
/* 覆盖cube类型spinner颜色 */
.dash-spinner.dash-sk-circle .dash-sk-child {
  background-color: hotpink !important;
}

方案2：纯CSS自定义全局加载动画（最灵活） #

如果要完全通过CSS控制动画样式、配色，不用修改任何现有业务代码里的dcc.Loading组件，可以直接隐藏默认spinner元素，用CSS伪元素实现自定义动画，一次配置全应用生效：

/* 隐藏所有默认spinner内置元素 */
.dash-spinner > * {
  display: none !important;
}
/* 配置spinner容器基础样式 */
.dash-spinner {
  position: relative;
  background-color: black;
  width: 48px;
  height: 48px;
}
/* 自定义粉色旋转环加载动画 */
.dash-spinner::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid transparent;
  border-top-color: hotpink;
  border-radius: 50%;
  animation: custom-spin 1s linear infinite;
}
@keyframes custom-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

你可以根据需求替换成任意CSS动画效果，比如跳动圆点、立方体翻转等，所有样式调整都只需要改这一段CSS即可。

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