Progress Ring Fills — effect skill for numbers & charts

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the how-to page.

A thin ring draws on to a percentage while the number in its center counts up in sync.

What it does

Built on Conic Progress Ring by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

Thin stroke on a faint track, rounded cap, the percent in the center; optional color shift as it passes thresholds.

When: Accuracy, uptime, completion, savings as a percentage.

Watch out: Do not use thick donut charts with many slices; one ring, one number.

Timing: 1.0–1.6 s power2.out; center count shares the same easing.

Also called: conic ring, gauge, percentage arc

In HyperFrames

npx hyperframes add conic-progress-ring

Or mk-usage-arc — one helper call drives both ring and number.

In Remotion

const p = interpolate(frame,[0,40],[0,0.94],{extrapolateRight:'clamp',easing:Easing.out(Easing.quad)});
<circle r={90} strokeDasharray={565} strokeDashoffset={565*(1-p)} strokeLinecap="round"/>
<text>{Math.round(p*100)}%</text>

In CapCut

Use a ring sticker with Mask → Circle sweep, or Text templates → "progress".

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/fccd1f2eac50/take-progress-ring-fills.mp4 — The Conic Progress Ring component rendered as installed (npx hyperframes add conic-progress-ring), defaults only (credit: Rendered by varg · HyperFrames Conic Progress Ring, https://hyperframes.heygen.com/catalog/components/conic-progress-ring)

More numbers & charts skills

Run the generation on varg

varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs.