Fitness app home: activity rings

How do I connect real step and calorie data to this screen?

Paste this template into Bolt, Lovable, or Replit and ask your AI to read today's step count, active calories, and exercise minutes from HealthKit on iOS or Google Fit on Android. Update the ring stroke-dasharray values and stat card numbers dynamically from the sensor data.

How do I animate the activity rings on load?

Ask your AI to add a CSS animation that grows each ring from zero to its target fill over 800ms with an ease-out curve. Stagger the three rings by 100ms each. Keep the total animation under one second for a fast, native feel.

How do I add a weekly summary view below the rings?

Add a horizontal scroll row of seven day chips below the stat cards. Each chip shows the day initial and a small ring fill indicator. Ask your AI to fetch the past seven days of data from your fitness table and render a mini ring for each.

Can I use this home screen for a calorie tracking or diet app?

Yes. Relabel the rings to Calories in, Calories out, and Protein. Update the stat cards to show macros instead of steps and active minutes. The ring SVG is fully reusable for any three-metric summary.