Calcite Loader: Styling the color

Dirk_Vandervoort — Thu, 19 Dec 2024 16:03:21 GMT

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?

Re: Calcite Loader: Styling the color

KittyHurley — Fri, 20 Dec 2024 15:11:19 GMT

@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; }

topic Re: Calcite Loader: Styling the color in Calcite Design System Questions

Calcite Loader: Styling the color

Re: Calcite Loader: Styling the color