Activity Rings

Explore Apple Activity Rings concentric progress display. Change ring count, progress, colors, and animations in the control panel to see changes reflected instantly on the iPhone screen.

9:41
●●●● WiFi 🔋
Activity
Progress
Summary
Adjust
⚠️ HIG Violation: Rings are hard to read
📚 HIG Guidelines — Try It Yourself
✓ Do — Good Example
✗ Don't — Bad Example

✓ Do This

  • Use concentric rings for related progress metrics
  • Animate progress changes for visual delight
  • Use distinct, vibrant colors for each ring
  • Show rounded end caps for the Apple Watch style
  • Include a legend explaining what each ring represents

✗ Don't Do This

  • Don't use more than 3 rings (readability suffers)
  • Don't use similar colors for adjacent rings
  • Don't skip the background track — it shows the goal
  • Don't make rings too thin to be visible

👆 See the bad pattern in the iPhone preview above

75%
50%
90%
Classic
Ocean
Sunset
Neon
Animate
SwiftUI Code