Spinner colour (server calls)

Feature Requests
1

Divine Creators of Anvil,

A detail that would push Anvil from ‘super awesome’ towards ’ ultra-awesome’:

If the ‘server call spinner’ would assume one of the standard colours (e.g. ‘Primary 700’) for the individual app. Or even better, if the spinner colour could be set in the theme CSS file, as a server call arg, or as a global app settings param.

I know that the issue of ‘colour misalignment’ could be avoided by suppressing the spinner altogether but that would be a pitty…

2

edit
Welcome to the forums, by the way. I missed the notice that you were a first time poster.

You can mess with the spinner in the CSS of the theme :

#loadingSpinner {
  /*set whatever here*/
}

Pretty sure you can use the standard colours in there. Search the forums, I think there is a post about it.

1 Like
3

I have one app that I use only as resource for all the other apps. In the assets of that app I added my own gif spinner with the company logo.

Then every app has this:

#loadingSpinner {
  width: 80px;
  height:62px;
  border-radius: 10px;
  box-shadow: 0px 0px 30px 30px rgba(255, 255, 255, 0.7);
  background-color: rgba(255, 255, 255, 0.7);
  background-image: url(https://my-app-with-assets.anvil.app/_/theme/spinner.gif) !important;
}
5 Likes
4

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

7 Likes
5

Just did this and it works great!

1 Like
6

Thanks for your swift reply - and for welcoming me :blush:. Sorry that my request was unjustified, but I’m super happy about the feature. Will get right on it :v:

7

Sweet :v: :blush: Thanks!

8

Reckon that should be a Show N Tell (even though it’s not strictly Anvil).

1 Like