How to re-colour the throbber using them CSS

Hi :)
you can use the custom property --sk-color for this purpose. It is defined at the :root element so that you can overwrite it everywhere.

for example:


.ajax-throbber {
--sk-color: red;
}


My apologies if I'm being a bit dim here but I have added...

.ajax-throbber {

  --sk-color: red;

}

... to my SCSS and recompiled as normal but the colour of the throbber is still the same (#333) colour ...

When I inspect the CSS, I see the original (wave.css) CSS in action...

Am I misunderstanding how or where I should redefine the value of --sk-color?

Hi, nice to hear that you find the problem.

It is a bit weird with custom properties and SCSS, but you must interpolate the SCSS variable to get that working.
So your code should look like this:

$color_1: 'red';

.ajax-throbber {
  --sk-color: #{$color_1};
}

For further reading https://sass-lang.com/documentation/style-rules/declarations/#custom-pro... and https://sass-lang.com/documentation/interpolation/

Thanks @mvogel → ,

I've learnt another new trick!

Automatically closed - issue fixed for 2 weeks with no activity.