Setting Type and Color for dcc.Loading using CSS

With the dcc.Loading component we can easily change the spinner and the colour using type and color inline.

dcc.Loading(children=[html.Div(id='test-div')], type='dot', color='hotpink')

What I’m struggling with is how we can set the colour and spinner type in the CSS so that we don’t have to manually change dozens of in-line components. There are a couple of useful starting points on stackoverflow and I see to have found the dash-spinner and the below will effect the background-color but won’t act on either the spinner type or the foreground colour of the spinner.

.dash-spinner {
  background-color: black;
  color: hotpink;
  type: cube;
}

.dash-spinner * {
  display: none !important;
}

Thank you for the help,

1 Like

I am having the same issue! Has anyone been successful setting it in a css folder? in the dcc.loading component using “color = “color name here”” is not working for me either

Hello @cdolfi,

So, the background color is accessible, but… color normally effects the children elements (the elements that you are waiting to load).

That’s why I think you dont have an effect.

What you might be able to do is apply a filter in order to shift the colors.


Check out the options here:

@jinnyzor I am trying to change the spinner color instead of the background. I am actually able to change the background of the spinner by:

.dash-spinner.dash-default-spinner {
    background-color: magenta;
}

in a css file in the assets folder. If I try to do color (trying to change the color of the spinner itself) it does not impact anything. This behavior I have found in the css file and in the dcc.loading attribute itself

That is correct, please try to pass one of the filter objects that I mentioned above.

Color has an impact on the children, which a spinner technically is not a text element, but I think an SVG, which will not change color.

Had to play around with things a bit but I got it to work, thanks!