# Avoid smooth spinners, use low-FPS spinners

A public-domain, JavaScript-free reference of loading-spinner designs implemented as low-frame-rate CSS or SVG, cutting a typical laptop's GPU usage from around 50 percent to single digits.

This page compares loading-spinner designs, implemented as pure CSS with no JavaScript, that update only a few times per second instead of animating smoothly. On a typical laptop this cuts CPU and GPU usage from around 50 percent to roughly 3 to 8 percent, which also reduces battery use, heat, fan noise, and slowdown of other running apps.

Each design, such as a ray ring, a dot ring, a segmented ring, a ticking clock, or dots with a pause, is shown at two sizes in both an SVG and an HTML-elements implementation, with measured GPU usage and notes on which version wobbles or renders more cleanly at small sizes. The page also respects a visitor's reduced-motion setting.

The code is public domain and can be copied directly into a project.

Website: https://nh2.me/low-fps-spinners/low-fps-spinners.html