I could not rotate the green part in the circular path. I want to set dynamically infinite time. I created a struct for ProgressView and want to set it as ProgressView in my project.

how to implement the red and black colour curve design in the rotation path

struct CircularProgressView: View {
        @State var progressValue: Float = 0.0
        
        var body: some View {
            ZStack {
    
                    ProgressBar(progress: self.$progressValue)
                        .frame(width: 150.0, height: 150.0)
                        .padding(40.0)
                
    
                }.onAppear{
                    self.incrementProgress()
                    
                }
    
        }
        func incrementProgress() {
            let randomValue = Float([0.012, 0.022, 0.034, 0.016, 0.11, 0.012].randomElement()!)
            self.progressValue  = randomValue
        }
        
      
    }
    struct ProgressBar: View {
        @Binding var progress: Float
        
        var body: some View {
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.red)
                
                Circle()
                    .trim(from: 0.0, to: CGFloat(min(self.progress, 2.0)))
                    .stroke(style: StrokeStyle(lineWidth: 20.0, lineCap: .round, lineJoin: .round))
                    .foregroundColor(Color.green)
                    .rotationEffect(Angle(degrees: 270))    
                    .animation(.linear)
    
            }
        }
    }

This is the Preview struct.

    struct CircularProgressView_Previews: PreviewProvider {
        static var previews: some View {
            CircularProgressView()
        }
    }

Thanks in advance for helping me.

CodePudding user response：

struct CircularProgressView: View {
    @State var progressValue: Float = 0.0
    @State private var isLoaderVisible: Bool = false
    var degree = 90
    
    var body: some View {
        ZStack {

                ProgressBar(progress: self.$progressValue)
                    .frame(width: 150.0, height: 150.0)
                    .padding(40.0)
            
      
        }.overlay(LoaderView(showLoader: isLoaderVisible))
            .onAppear {
                isLoaderVisible.toggle()
            }

    }
  
}
struct ProgressBar: View {
    @Binding var progress: Float
     @State var degree:Double = 90
    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: 20.0)
                .foregroundColor(Color.green)
        }
    }
}
struct CircularProgressView_Previews: PreviewProvider {
    static var previews: some View {
        CircularProgressView()
    }
}

// enum for LoaderView

public enum LoaderAnimation {
    case low, medium, high

    var animationSpeed: Double {
        switch self {
            case .low: return 1.0
            case .medium: return 0.8
            case .high: return 10.2
        }
    }
}

This this the LoaderView which we set on overlay and animate

public struct LoaderView: View {

    var loaderAnimationSpeed: LoaderAnimation? = .high
    var showLoader: Bool = false

    public var body: some View {
        GeometryReader { reader in
            ZStack {
                Circle()
                    .stroke(lineWidth: 20.0)
                    .opacity(0.3)
                    .foregroundColor(Color.yellow)
                
                Circle()
                    .trim(from: 0.6, to: 1)
                    .stroke(.green, lineWidth: 20)
                    .rotationEffect(.degrees(showLoader ? 360 : 0))
                    .animation(Animation.easeInOut(duration: showLoader ? loaderAnimationSpeed?.animationSpeed ?? 0.0 : 1).repeatForever(autoreverses: false), value: showLoader)
            }
        }
    }

    public init( loaderAnimationSpeed: LoaderAnimation? = .medium, showLoader: Bool) {
        self.loaderAnimationSpeed = loaderAnimationSpeed
        self.showLoader = showLoader
    }
}