Reduces CPU/GPU usage from ~50% to ~3-8% on a typical laptop (i7-7500U). Reduces battery use, heat, fan noise, and slow-down of other apps.
Deshittify your app or website now with some slick low-FPS spinners!
CSS-only, low-FPS spinners
This page uses no JavaScript at all. Check its public-domain code, copy as you like!
Implementation:
Pick a design to show only its row (for measuring it alone), or
.
HTML or SVG: GPU usage (in Chromium)
Measured with Chromium's Task Manager (Shift+Esc on Linux/Windows), "GPU Process" row, on the i7-7500U laptop,
one design shown at a time.
"Measured" in the table marks these; the other verdicts follow from how the design animates and are expected, not measured.
Rotating the whole spinner costs the same in HTML and SVG:
it is drawn once, and the GPU only turns the finished image.
Animating many HTML elements (the segments, squares, dots or sand levels themselves)
usually gives each one its own GPU layer, and the GPU blends all of them on every step.
In SVG, the shapes are not given layers of their own:
the small image is redrawn on each step and the GPU still draws a single layer.
To see the layers, open DevTools, then Rendering, and turn on "Layer borders".
HTML or SVG: Visual quality
Wobble when rotating (Chromium and Firefox):
the rotating HTML spinners (Ray ring, Dot ring, Segmented ring) visibly wobble at small sizes,
because their parts are redrawn at each new angle and their edges come out slightly different each time.
The SVG versions don't.
Segmented ring 2 doesn't rotate, so it doesn't wobble in HTML either.
Firefox 155: the HTML Segmented ring draws small grey vertical and horizontal lines
into the gaps between its segments, seen at 100% zoom at 48px.
Each HTML segment is a whole ring outline cut down to one slice with clip-path,
and slivers of the cut-away outline probably show along the cut edges.
The SVG version doesn't have this.