Circular Progress Bar with Swift UI

Question

I am creating a countdown timer app with Swift UI. I tried to add a circular progress bar in it but its appearance never changes.

I prepared 2 files. One of them is coded about countdown procedure and the other file is coded about UI. I make the data linking with the keys @ObservableObject, @Public for the procedure code and @ObservedObject for the UI code.

A number which is set "counter" as variable is started to countdown 1 per second. I confirmed it works by printing the number in console of Xcode.

The number is down but progress bar does not change and finally the bar disappears once the count number is 0.

Prodedual Code

import SwiftUI

class CountDownTimer: ObservableObject {

    @Published var counter: CGFloat = 10

    let interval = 1.0

    var timer: Timer?

    func start() {
        timer = Timer.scheduledTimer(withTimeInterval: interval, repeats: true, block: { _ in
            self.counter -= 1
            print(self.counter)

            if self.counter <= 0 {
            self.timer?.invalidate()
            self.timer = nil
          }
        })
    }

    func stop() {
        self.timer?.invalidate()
    }
}

UI Code

struct PresentationView: View {

    @ObservedObject var countDownTimer = CountDownTimer()

    var body: some View {
        NavigationView {
            VStack {

                Spacer()

                VStack {
                    ZStack {
                        Text(String(format: "%.0f", countDownTimer.counter))
                            .font(Font.largeTitle.monospacedDigit())
                            .fontWeight(.light)
                            .padding()

                        Circle()
                            .stroke(Color(.systemIndigo), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
                            .aspectRatio(contentMode: .fit)
                            .padding()

                        Circle().trim(from: 0, to: countDownTimer.counter)
                            .stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
                            .aspectRatio(contentMode: .fit)
                            .rotationEffect(Angle(degrees: -90))
                            .padding()
                    }

                    Spacer()

                    // スタートボタンとストップボタン
                    HStack {
                        Button(action: {self.countDownTimer.stop()}) {
                            Text("STOP")
                                .fontWeight(.light)
                                .foregroundColor(.white)
                        }.frame(maxWidth: 75, maxHeight: 75)
                            .padding()
                            .background(Color(.systemIndigo))
                            .cornerRadius(100)
                            .padding()

                        Button(action: {self.countDownTimer.start()}) {
                            Text("START")
                                .fontWeight(.light)
                                .foregroundColor(.white)
                        }.frame(maxWidth: 75, maxHeight: 75)
                            .padding()
                            .background(Color(.systemTeal))
                            .cornerRadius(100)
                            .padding()

                    }

                }
            }
        }
    }
}

Please help me if you know how to fix this. My English might be broken because it's my second language.

Thank you.

Answer 1

You might need to divide endFraction by 10 ,

Circle().trim(from: 0, to: countDownTimer.counter / 10) // Dividing by 10
      .stroke(Color(.systemTeal), style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .bevel))
      .aspectRatio(contentMode: .fit)
      .rotationEffect(Angle(degrees: -90))
      .padding()

Thanks!