Calcite Loader: Styling the color

Dirk_Vandervoort

https://codepen.io/dirk-vandervoort/pen/emOvxoG shows the issue.

My attempts to change the color of the calcite-loader are partially successful, but now instead of being a consisted blue-colored spinner, the color oscillates between reddish (--calcite-color-brand: #E63D2F;) and what appears to be the default brand color.

My question is: how can I style the spinner to be #E63D2F all the time?

KittyHurley

@Dirk_Vandervoort The above will be mitigated in Calcite's upcoming release in early 2025.

Additionally, new CSS variables will be offered to customize Loader further, such as the component's padding, font weight, text color, progress ring color, and track color.

As a workaround prior to the release you can adjust the variables of the component's --calcite-color-brand-hover and --calcite-color-brand-press to display the same color throughout, like so: 

#custom-loader {
  --calcite-color-brand: #E63D2F;
  --calcite-color-brand-hover: #E63D2F;
  --calcite-color-brand-press: #E63D2F;
}