✨ New: pull these templates straight into Claude, Cursor & ChatGPT with our MCP server

Back to Templates

Circular Progress

Animated circular progress ring for KPIs and loading scenes

Open with AI

OpenAIChatGPTClaudeClaude

Description

Renders an SVG circle that fills from 0% to a target value using stroke-dashoffset driven by interpolate(), with a percentage number counting up in the centre. Use it for KPI highlights, loading sequences, goal trackers, or any data point that maps to a percentage.

Target value, ring color, stroke width, and animation duration are configurable. A rotating dot and pulse effect add visual polish. Built with useCurrentFrame() and useVideoConfig() for frame-accurate, deterministic rendering.

React Video Editor

Want new Video Templates in your inbox?

We add new Remotion templates regularly. Subscribe and we'll email you when fresh ones land. No spam, just the drops.

Circular Progress | Free Remotion Templates