Implementing a progress ring

Admit it – since you bought your Apple Watch, you are getting fitter, aren't you? I bet it is because of the activity rings you want to close every day. Am I right?

In this recipe, we'll implement a progress ring similar to those on the Apple Watch, and we'll change its value via some sliders.

Getting ready

You don't need to prepare anything for this recipe; just create a SwiftUI project called ProgressRings.

How to do it…

We are going to implement two components:

• A single ProgressRing View
• A composite RingsView

We'll add the latter to ContentView, and we'll simulate progress using three sliders.

To do this, follow these steps:

1. Implement a ring view using a Shape object and an arc:

   struct ProgressRing: Shape {
       private let startAngle = Angle.radians(1.5 * .pi)
       @Binding
       var progress: Double
    ...