Back to HyperFrames Templates
Radial Gauge
A donut gauge sweeps to its value with a glowing tip and a counting centre
Description
A single-metric ring: the gradient arc sweeps around a faint track with a glowing dot on the leading edge, while the percentage counts up in the middle in sync. A tiny vanilla-JS loop drives the arc offset, the tip position and the number together, then eases back down and loops. Light type, hairline track — no chart library.
Set `TARGET`, `LABEL`, the timing and the palette at the top. Ideal for completion, uptime, score or capacity in a dashboard or explainer.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Data
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.