How to add icon to circle progress bar tip?

Question

I'm trying to add an icon to the tip of the progress bar in the circle. This is the code I have so far:

Circle()
    .trim(from: 0, to: 0.6)
    .stroke(style: StrokeStyle(lineWidth: 24, lineCap: .round, lineJoin: .round))
    .rotationEffect(.degrees(-90))
    .foregroundColor(.green)
    .frame(width: 300, height: 300)
    .padding()

This ends up looking like this:

But I'm trying to add an icon to the tip of the progress like this:

How can I achieve this in SwiftUI?

Answer 1

Use the left arrow icon and put it into the ZStack and set y offset in minus.

struct DemoView: View {
    
    @State private var angle: Double = -90
    
    var body: some View {
        ZStack {
            Circle()
                .trim(from: 0, to: 0.6)
                .stroke(style: StrokeStyle(lineWidth: 24, lineCap: .round, lineJoin: .round))
                .rotationEffect(.degrees(angle))
                .foregroundColor(.green)
            
            
            Image("left-arrow")
                .offset(y: -150)
                .rotationEffect(.degrees(305 + angle))
        }.frame(width: 300, height: 300)
        .padding()
    }
}

I have added an image arrow using progress code from here

struct ProgressBar: View {
    @Binding var progress: Float
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: .center) {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.red)
                
                Circle()
                    .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.red)
                    .rotationEffect(Angle(degrees: 270.0))
                    .animation(.linear)
                
                Text(String(format: "%.0f %%", min(self.progress, 1.0)*100.0))
                    .font(.largeTitle)
                    .bold()
                
                Image("left-arrow")
                    .offset(y: -(geo.size.height/2))
                    .rotationEffect(.degrees(Double(self.progress) * 360))
                    .animation(.linear)
            }
        }
    }
}