Select to view content in your preferred language

Calcite Loader: Styling the color

161
1
Jump to solution
12-19-2024 08:03 AM
Dirk_Vandervoort
Frequent Contributor

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?

0 Kudos
1 Solution

Accepted Solutions
KittyHurley
Esri Contributor

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

 

View solution in original post

0 Kudos
1 Reply
KittyHurley
Esri Contributor

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

 

0 Kudos