Activity rings

Three concentric rings, one goal each. They draw from zero on load while the numbers count up in step, and the ring that beats its goal keeps going round in a darker tint instead of stopping at 100%.

What it is

Three concentric rings, one goal each. They draw from zero on load while the numbers count up in step, and the ring that beats its goal keeps going round in a darker tint instead of stopping at 100%. The Apple Watch pattern, rebuilt for the web and for apps: daily goals, habits, budgets, team targets. It is the most legible way to show three progress values at once in a small space.

Full library — live sample, numbers, prompt and source — is for clients. I have the password

Seen in

@叨叨AI (Douyin) · 第 6 集「10 个图表交互控件」· 01 活动圆环 · 0:03