A radial gauge for Framer: one figure on an arc, drawn as inline SVG with no charting library.
Sweep angle and rotation are controls, so it is a 240 degree dial, a half circle or a full ring depending on what you set. Thickness, rounded cap, track colour and tick marks with min and max labels are all controls.
Up to three threshold bands each take a start percent and a colour, so the arc changes colour by zone rather than staying one flat accent. A target marker draws a notch at a value you choose, which is what turns a gauge into a comparison instead of a decoration.
The centre readout formats as plain, currency or percent, with a unit suffix and a caption line underneath. The fill animates to the value on scroll into view, and clamps to the arc if the value falls outside the range rather than drawing past the end of it.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
A radial gauge for Framer: one figure on an arc, drawn as inline SVG with no charting library.
Sweep angle and rotation are controls, so it is a 240 degree dial, a half circle or a full ring depending on what you set. Thickness, rounded cap, track colour and tick marks with min and max labels are all controls.
Up to three threshold bands each take a start percent and a colour, so the arc changes colour by zone rather than staying one flat accent. A target marker draws a notch at a value you choose, which is what turns a gauge into a comparison instead of a decoration.
The centre readout formats as plain, currency or percent, with a unit suffix and a caption line underneath. The fill animates to the value on scroll into view, and clamps to the arc if the value falls outside the range rather than drawing past the end of it.
After purchase you receive the component URL. In Framer, press Insert, choose Add Component URL, and paste it.
Licence: yours to use on your own sites and on client sites, commercially, with no attribution. Not for resale or redistribution: do not share the component URL, and do not publish the component or its code anywhere, paid or free. Full terms arrive with your purchase. Questions: me@majedesigns.dev
