Border spinner while loading

[ekdahl]

Would it be possible to replace the GIF loading symbol from the supplied themes with a border spinner instead?

Bootstrap has a rotating border spinner included which use currentColor as border.
https://getbootstrap.com/docs/5.3/components/spinners/
This would enable easy styling for different color schemes.

I did a small try myself but failed, as the whole content started spinning :).
Maybe it's more work than what is worth, just wanted to raise the idea.

[fisharebest]

The spinner is created using the following CSS:

.wt-ajax-load:empty {
    height: 32px;
    width: 32px;
    background: url(images/loading-32x32.gif) no-repeat;
}

Google provides several examples of using CSS to create spinners. I would have thought it was pretty straightforward.

[ekdahl]

Sure, I understand that. I don't think I was clear enough with what I meant.
What I was after was to replace the spinner with an inline SVG (or the bootstrap alternative), which gives the advantage that the same image can be used for different palettes (light and dark). Because with inline SVG CSS variables for colors can be used to style the image. This is not possible with external images, and then different images has to be used for each palette.
I'm not sure how to accomplish this in webtrees, so that everywhere, where the class wt-ajax-load is used an inline SVG should be used, when loading.
Found a good source of SVG spinners here: https://github.com/n3r4zzurr0/svg-spinners