SwiftUI Circular Progress Bar using Stacks and Circle Shapes

SwiftUI Circular Progress Bar using Stacks and Circle Shapes ContentView.swift

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79

// //  ContentView.swift //  Test // //  Created by Cairocoders //   import SwiftUI   struct ContentView: View {           @State var progressValue: Float = 0.0           var body: some View {         ZStack {             Color.gray                 .opacity(0.1)                 .edgesIgnoringSafeArea(.all)                           VStack {                 ProgressBar(progress: self.$progressValue)                     .frame(width: 200, height: 200)                     .padding(40)                                   Button(action: {                     self.incrementProgress()                 }) {                     HStack {                         Image(systemName: "plus.rectangle.fill")                         Text("Increment")                     }                     .padding(15.0)                     .overlay(                         RoundedRectangle(cornerRadius: 15.0)                             .stroke(lineWidth: 2.0)                     )                 }                                   Spacer()             }         }     }           func incrementProgress() {         let randomValue = Float([0.010, 0.020, 0.030, 0.040, 0.50].randomElement()!)         self.progressValue += randomValue     } }   struct ProgressBar: View {       @Binding var progress: Float           var body: some View {         ZStack {             Circle()                 .stroke(lineWidth: 30)                 .opacity(0.6)                 .foregroundColor(Color.blue)                           Circle()                 .trim(from: 0.0, to: CGFloat(min(self.progress, 1.0)))                 .stroke(style: StrokeStyle(lineWidth: 30, lineCap: .round, lineJoin: .round))                 .foregroundColor(Color.green)                 .rotationEffect(Angle(degrees: 270.0))                 .animation(.linear)                           Text(String(format: "%.0f %%", min(self.progress, 1.0)*100.0))                 .font(.largeTitle)                 .bold()         }     } }   struct ContentView_Previews: PreviewProvider {     static var previews: some View {         ContentView()     } }