Got inspired looking at some dots and figured I'd try out using an SVG as a spinner element. This felt easier than animating a single element with pseudo-elements (because of some issues animating colors with CSS variables vs opacity) and just seemed like a fun thing to try.
I wanted to get this to work with a <symbol>, but ran into issues where the animation never started for shadow content.
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="spinner-dots" class="spinner-dots">
<title>Loading...</title><circle cx="4" cy="8" r="4"/><circle cx="16" cy="8" r="4"/><circle cx="28" cy="8" r="4"/>
</symbol>
</svg>
<svg class="text-{{ .name }}" width="32" height="16" role="status"><use xlink:href="#spinner-dots"/></svg>Alas, repeating the SVG manually worked fine. This approach keeps the CSS ridiculously small, but I'd like to keep the HTML small, too, with support for that symbol element. Will come back to this at another time.
Also, we should probably rename spinners to loaders or something hah.