Loading spinner is REALLY small - can I make it bigger?

App Building
1

Hey y'all,

I have a nice meaty table. But when a user adjusts some of the options in a different place on the screen, it triggers a reload. No biggie, right?

Yes, except that spinner is REALLY small on that big table.

Is there a way to make the spinner bigger? Or a different color? Or both?

2

Filed as a feature request since this isn't supported outside of custom CSS. Great UI feedback :slight_smile:

3

Thanks @victoria - can you also share the custom CSS that makes this work, please?

4

This worked for me just now!

#retool-widget-table1 > div > div._hPGyJ > div.fetching-mask.fetching > i {
  color: red;
  font-size: 200px;
}

In general, CSS is Retool requires you to grab the very specific selector. To grab the correct selector, you can open up your browser's Dev Tools (cmd option i on Mac), click the element selector arrow (top left), select the element on the page, right click the element in the elements list, Copy, Copy selector. I've also attached a GIF of this workflow.\

Grabbing the selector of a "moving" element (like a spinner that goes away after some seconds) is a little trickier, but I used the debugger trick this time. I opened my console, ran a slow query to trigger the spinner and typed debugger in my console. This effectively froze the page while the spinner was visible so I could easily mouse over to grab the selector.

Let me know if you have any other questions!
getselector.gif

1 Like