Low-FPS Spinners
Low-FPS CSS/SVG spinners cut CPU use from 50% to 3-8%
A public-domain collection of CSS/SVG loading spinner designs that animate at a low frame rate (1–30 steps per second) instead of smooth 60fps animation, reducing CPU/GPU usage on a typical laptop (measured from ~50% down to ~3-8% on an i7-7500U) and thereby cutting battery drain, heat, fan noise, and slowdown of other apps. The showcase page itself uses no JavaScript, and all designs can be copied freely.
Key Features
Low-FPS animation approach
Spinners animate at selectable step rates from 1 to 30 changes per second instead of smoothly, dropping GPU usage from ~50% to ~3-8% on a typical i7-7500U laptop.
Multiple spinner designs
Includes ray ring, dot ring, segmented rings, square ring, 2×2 squares, ticking clock, three dots/squares with pause, and segmented hourglass variants (10 and 40), each shown at 16px and 48px sizes.
HTML and SVG implementations
Every design comes in both HTML-elements-only and SVG versions, with guidance on which to pick — SVG avoids edge wobble in rotating designs and usually uses less GPU when many elements animate.
Per-design GPU usage measurements
GPU usage measured in Chromium's Task Manager for several designs (e.g. rotating segmented ring 6-10% HTML / 8-9% SVG at 10 steps/s; fade-in-place segmented ring 30% HTML / 13-15% SVG at 30 steps/s), with expected values derived for the rest.
Copyable public-domain code
The page's code is public domain; the author invites anyone to copy it as they like.
Respects the prefers-reduced-motion setting
If a user has "reduced motion" enabled in their desktop settings, the spinners are shown still instead of animating.
How It Works
- 1
Pick a design and frame rate
Each spinner row offers a choice of change rates (1 to 30 changes per second) and sizes (16px, 48px), and you can isolate a single design to measure it alone.
- 2
Rotating vs. per-element animation
Designs that rotate the whole spinner animate only one element, which is cheap and equal in HTML and SVG; designs that animate individual parts (segments, squares, dots, sand levels) give each HTML element its own GPU layer, so SVG — which redraws one small image per step — is cheaper.
Pros & Cons
Pros
- Dramatically lower GPU usage (measured ~50% down to ~3-8% at low step rates on the test laptop)
- Reduces battery use, heat, and fan noise
- Public-domain code with no licensing restrictions
- No JavaScript required — pure CSS/SVG
- Concrete per-design GPU measurements rather than just claims
- SVG versions avoid the visual edge wobble that HTML rotating spinners show at small sizes (a flaw the author notes even in spinners from trillion-dollar companies like Google AI Studio)
Cons
- Not a drop-in library or package — you copy code from the page and integrate it yourself
- Low-FPS animation is intentionally choppy, which is a deliberate aesthetic trade-off not everyone will want
- Designs that animate many separate elements are more expensive in HTML (each element gets its own GPU layer); some designs only reach low GPU use in the SVG version
- Rotating HTML spinners visually wobble at small sizes in Chromium and Firefox, and the HTML segmented ring draws stray grey lines into gaps in Firefox 155
- Measurements were taken on a single machine (i7-7500U, Chromium on Linux/Windows); results on other hardware may differ
Who It's For
Best for
- Web and desktop app developers who want efficient, copy-paste loading spinners without JavaScript
- Projects where background CPU/GPU usage matters: laptops on battery, thermally constrained machines, quiet environments
- Developers who care about rendering quality and want wobble-free spinner edges via the SVG versions
Not ideal for
- Teams looking for a maintained npm package or a UI component library with API-level integration
- Interfaces that specifically need smooth, high-frame-rate motion animation
Use Cases
- Replacing smooth 60fps loading spinners in apps and websites to cut battery use, heat, and fan noise
- Reducing CPU/GPU load so other apps run faster while spinners are active
- Finding which spinner design (rotating vs. fade-in-place, HTML vs. SVG) is cheapest to render before adopting it
Pricing
The code is explicitly public domain — free to copy and use.
FAQ
How much CPU/GPU do these spinners save?
The page cites a reduction from ~50% to ~3-8% GPU usage on a typical laptop (i7-7500U). Per-design Chromium measurements include a rotating segmented ring at 6-10% (HTML) / 8-9% (SVG) at 10 steps/s, and a fade-in-place segmented ring at 14% (HTML) / 8-9% (SVG) at 10 steps/s and 30% (HTML) / 13-15% (SVG) at 30 steps/s.
Do I need JavaScript?
No. The spinners are CSS-only (with HTML or SVG markup), and the showcase page itself uses no JavaScript at all.
Can I use the code in my own project?
Yes — the code is public domain, so you can copy it as you like.
Should I use the HTML or SVG version?
The page recommends SVG in general: rotating HTML spinners visibly wobble at small sizes, and designs that animate many separate elements are cheaper in SVG because HTML gives each animated element its own GPU layer while SVG redraws a single layer.
Why don't the spinners move for me?
You likely have "reduced motion" enabled in your desktop settings; the page respects that setting and displays the spinners still.
How were the GPU measurements taken?
Using Chromium's Task Manager (Shift+Esc on Linux/Windows), looking at the "GPU Process" row on the i7-7500U laptop, with one design shown at a time. Verdicts not marked "measured" are derived expectations based on how each design animates.
Similar Products
Free browser-based Roblox GUI builder: drag-and-drop design, interactive buttons, and instant Luau code export. No login