Gauge Dial Loader
A loading indicator built like a real instrument panel. The needle sweeps with an ease-out curve, overshoots with a configurable spring bounce, holds at target, then resets creating a cycle that feels mechanical and intentional.
Every part of the gauge lives in its own collapsible control group: Colors, Arc, Needle, Hub, Ticks, Decorations, Readout, and Animation. Show or hide any element independently. Change colors, timing, bounce force, tick density, needle length, hub size, and more all from the panel with no code.
Four colored control buttons at the bottom each have their own color property. The readout shows a live percentage number with rate and ETA indicators below the gauge. The entire component scales fluidly using container-relative units, so it looks sharp whether it fills a dashboard card or sits in a hero section.
All colors bind to CSS custom properties, making the component fully compatible with Framer variable theming. Swap between light and dark themes without touching a single control.
The component pauses automatically when off-screen or when the browser tab is hidden, keeping CPU usage minimal.
Refund Policy: All sales are final. No refunds.
By sbarah.com
Free support: framer@muhmad.me
