Spinner colour (server calls)

And to create the gif…

the image file for the anvil loading spinner is here: https://anvil.works/ide/img/loading.gif

You can do the following for a quick solution:
visit: https://ezgif.com/effects
use the link to upload the gif: https://anvil.works/ide/img/loading.gif
change the hue/saturation/lightness: see formula below

Screen Shot 2020-03-05 at 15.14.23

then Scroll down - hit apply and :boom:

ezgif-6-b7c9c8ae6bc7

Right-click - save image as… then follow the suggestion above from @stefano.menci
or upload it to the relevant project in your assets and in theme.css do

#loadingSpinner {
  background-image: url(_/theme/spinner.gif);
}

for the Hue Saturation Lightness Slider values:
get the desired HSL of the color you want I used: http://colorizer.org/ to convert the RGB to HSL
(or just type "#FF9800 to HSL" in google)

#FF9800 --> hsl(35.8, 100%, 50%) --> h = 35.8, s=100, l = 50

try:

hue: (100+200/360*(h-209))%200 = 3
sat: 100 + 2*(s-57) = 186 
lightnes: 100 + 2*(l-53) =  94

I’m not sure this is exactly right but it should get you close enough

8 Likes