Back to HyperFrames Templates
Activity Rings
Three concentric rings fill on a stagger while their values count up
Description
A fitness-style progress trio: three nested rings sweep to their targets one after another with rounded, glowing caps, and a legend on the side counts each value up in time. One small vanilla-JS loop drives every ring offset and number, eases them back down and loops. Hairline tracks, light type — no chart library.
Set the three `RINGS` (label, target, colours) and the timing at the top. Great for goals, capacity, quotas or any set of related percentages.
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.