---
title: "Radial Gauge — Framer component · Best of Framer"
description: "$8.00 · Framer component · by Majed Monem · Interactive. A radial gauge for Framer: one figure on an arc, drawn as inline SVG with no charting library."
canonical: "https://framer.elliotli.dev/component/radial-gauge"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Radial Gauge

# Radial Gauge

Arc gauge with threshold bands

[View on Framer](https://framer.com/marketplace/components/radial-gauge/?via=elliot-li)

![Radial Gauge preview image 1](https://framer.elliotli.dev/og/component/radial-gauge/05ebd5da88b4f258/1600x1200.jpg)

## Summary

A radial gauge for Framer: one figure on an arc, drawn as inline SVG with no charting library.

## Description

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #10244

## Details

- **Author**: Majed Monem
- **Price**: $8.00
- **Published**: 2026-08-15
- **Updated**: 2026-10-23
- **Added**: 2026-08-15
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase