Activity rings

Design a compact activity rings component for a fitness app. Use concentric circles to show three daily metrics: steps, calories, and active minutes. The default view should read as a quick status check, with each ring clearly labeled and paired with a visible number and goal.

Include one interaction state that reveals more detail on tap or hover. That state should show the exact progress for each metric, not just the visual ring fill. If you use motion, keep it tied to progress changes rather than decoration.

Treat accessibility as part of the component, not an afterthought. The rings need a text alternative, enough contrast to separate each metric, and a layout that still works when color is removed or the component is viewed at a small size.

Employ a color-coded scheme for the activity rings to intuitively differentiate between the various metrics, using universally recognized colors that symbolize the type of activity.