Avoid smooth spinners, use low-FPS spinners!

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: SVG (better, see below) HTML elements only

Pick a design to show only its row (for measuring it alone), or show all.

Design	What animates	GPU usage (in Chromium)
Ray ring (8)	Whole spinner rotates. In HTML it wobbles at small sizes; the SVG version doesn't.	Same for HTML and SVG: only one element animates.
Dot ring (8)	Whole spinner rotates. In HTML it wobbles at small sizes; the SVG version doesn't.	Same for HTML and SVG: only one element animates.
Segmented ring (8)	Whole spinner rotates. In HTML it wobbles at small sizes, because the segments' clipped edges render differently at each angle; the SVG version doesn't.	Same for HTML and SVG. Measured: HTML 6–10%, SVG 8–9% at 10/s.
Segmented ring 2 (8)	Segmented ring without rotation: each segment steps through the fade levels in place, so the ring's pixels never move and its shape can't wobble, in HTML too. Eight separately animated elements.	Prefer SVG. Measured: HTML 14%, SVG 8–9% at 10/s; HTML 30%, SVG 13–15% at 30/s.
Square ring (8)	Each square's opacity; eight separately animated elements. A 3×3 grid doesn't look the same after a 45° turn, so it can't just rotate.	SVG expected lower: in HTML, each of the 8 animated elements is its own GPU layer.
Square ring 2 (8)	Square ring with 2px gaps instead of 1px (at 16px).	SVG expected lower: in HTML, each of the 8 animated elements is its own GPU layer.
2×2 squares	Whole spinner rotates, 90° per step.	Same for HTML and SVG: only one element animates.
Ticking clock	Only the hand rotates; the face stays still.	Same for HTML and SVG: only one element animates.
Three dots + pause	Each dot's opacity; three separately animated elements. Each dot lit in turn, then one step with none lit.	SVG expected lower: in HTML, each of the 3 animated elements is its own GPU layer.
Three squares + pause	Three dots + pause with square dots.	SVG expected lower: in HTML, each of the 3 animated elements is its own GPU layer.
Three squares + pause 2x	Three squares + pause, with two steps of none lit instead of one.	SVG expected lower: in HTML, each of the 3 animated elements is its own GPU layer.
Segmented hourglass (10)	One shape per fill level of each chamber, plus one per stream length; 15 separately animated elements, at most three visible at a time. 19 steps: sand flows down, the bottom drains, then the top refills from below, holding 2 steps between phases.	SVG expected lower: in HTML, each of the 15 animated elements is its own GPU layer.
Segmented hourglass (40)	One shape per fill level of each chamber, plus one per stream length; 60 separately animated elements, at most three visible at a time. 82 steps: sand flows down, the bottom drains, then the top refills from below, holding 8 steps between phases.	SVG expected lower: in HTML, each of the 60 animated elements is its own GPU layer.

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.

Design	Changes/s	HTML	SVG
Segmented ring (rotates)	10	6–10%	8–9%
Segmented ring 2 (fades in place)	10	14%	8–9%
Segmented ring 2 (fades in place)	30	30%	13–15%

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.