Show HN: Avoid smooth spinners, use low-FPS spinners

Recommendation to replace smooth, high-FPS loading spinners with low-FPS, stepwise animations that cut GPU/CPU work dramatically. Using only CSS (no JavaScript) and public-domain code, several spinner designs are shown and tested on an i7-7500U laptop: typical smooth spinners can drive GPU usage around ~50%, while low-FPS variants can reduce that to roughly 3-8%, saving battery, heat, fan noise and improving responsiveness of other apps. The page provides multiple designs (rings, dots, square grids, hourglasses) and lets you pick size and steps-per-second to compare.

Key technical findings explain why: rotating an entire spinner is cheap because the GPU just transforms a single precomposited layer, but animating many individual HTML elements typically gives each element its own GPU layer, forcing the GPU to blend them each frame. SVG implementations usually avoid separate layers by redrawing a single bitmap, so they often use less GPU overall. Measured examples: a rotating segmented ring at 10 steps/s used 6-10% GPU in HTML and 8-9% in SVG; a segmented ring that fades in place used 14% (HTML) vs 8-9% (SVG) at 10/s and 30% vs 13-15% at 30/s. Visual quality also favors SVG: HTML spinners can wobble at small sizes and show rendering artifacts in some browsers.