twbs
WIP: Add loading dots spinner
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.
Live preview
We can try to check out there the naming usually used in several DSs or libraries. At Orange, everything is gathered under the name of "Progress indicators" (bars and spinners). At Adobe, they have Progress bar and Progress circle. I don't see for the moment specific component for the "loading dots spinner".
"Loaders" would make sense, we already have "Progress" for progress bar and it should stay separated.
Please consider "pulse" or "wave" instead of "dots", in case replacing <circle> with <rect> would be possible. So, there would be loader-pulse, loader-spin, loader-grow.
FWIW you may use the <animate> SVG element to save writing any CSS at all. Here's a demo on CodePen, and FYI it can also be embedded as a background-image.
That may be a bit wordy, but wanted to share in case it could help :)
FWIW you may use the
<animate>SVG element to save writing any CSS at all. Here's a demo on CodePen, and FYI it can also be embedded as abackground-image.That may be a bit wordy, but wanted to share in case it could help :)
Oh damn, didn't realize that was doable. I think doing the animation in CSS so that it can be easily modified or replaced makes the most sense here for that part? I wanted to use the SVG itself to save on the HTML most of all and still provide some customization that you'd get with custom elements.
I'll look into more of what @alecpl suggested and maybe I'll change my mind as I go though, so thanks for the CodePen and ideas y'all!