# Progress View in SwiftUI

Progress views are a common UI element used to indicate the progress of a task or the completion percentage of an action. In SwiftUI, we can use the built-in `ProgressView` to add this functionality to our app.

In this blog post, we will explore how to use the `ProgressView` in SwiftUI.

The code of this post is available [here](https://github.com/xavier7t/iOSDevX/tree/main/iOSDevX/202303-Mar%202023/ProgressView).

# 1: Creating a basic progress view

To create a basic progress view, we can simply use the `ProgressView` initializer with a `@Binding` variable that represents the progress value.

Here's an example:

```swift
struct ContentView1: View {
    @State private var progressValue = 0.5
    
    var body: some View {
        VStack {
            ProgressView(value: progressValue)
            Button("Increase Progress") {
                progressValue += 0.1
            }
        }
    }
}
```

In this example, we define a `ContentView` struct with a `@State` variable that represents the progress value. We then use the `ProgressView` initializer with a binding to the progress value, and a `Button` that increases the progress value by 0.1 when tapped.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680143433423/a49621cc-8b13-4ff8-8f18-85e7921ad31c.png align="center")

# 2: Customizing the progress view

The `ProgressView` has many customization options that allow us to change its appearance and behavior. For example, we can change the progress bar style, the progress tint color, and the progress track tint color.

Here's an example of customizing the `ProgressView`:

```swift
struct ContentView2: View {
    @State private var progressValue = 0.5
    
    var body: some View {
        VStack {
            ProgressView(value: progressValue)
                .progressViewStyle(CircularProgressViewStyle(tint: .red))
                .accentColor(.blue)
                .padding(20)
                .background(Color.gray.opacity(0.3))
                .cornerRadius(20)
            Button("Increase Progress") {
                progressValue += 0.1
            }
        }
    }
}
```

In this example, we use the `CircularProgressViewStyle` to change the progress bar style to a circular one, and set the tint color to red. We also use the `accentColor` modifier to change the color of the progress value, and add some padding, background color, and corner radius to the `ProgressView`.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680143495061/218ea5a2-8df6-4fd9-aa51-7b7a4bae32f7.png align="center")

# 3: Handling completion

In some cases, we may want to handle the completion of a progress view, such as showing a message or navigating to a new screen when a task is completed. In SwiftUI, we can use the `onChange` modifier to handle the completion of a progress view by checking the progress value.

```swift
struct ContentView3: View {
    @State private var progressValue = 0.0
    
    var body: some View {
        VStack {
            if progressValue < 1.0 {
                ProgressView(value: progressValue, total: 1)
                    .progressViewStyle(LinearProgressViewStyle())
            } else {
                Text("Task completed.")
            }
            Button("Increase Progress") {
                withAnimation {
                    progressValue += 0.1
                }
            }
        }
        .onChange(of: progressValue) { newValue in
            if newValue >= 1.0 {
                print("Task Completed.")
            }
        }
    }
}
```

In this example, we use the `total` parameter to set the total value of the progress view to 1.0. We also use the `LinearProgressViewStyle` to change the progress bar style to a linear one, and the `onChange` modifier to print a message when the progress is completed and the progress value is greater than or equal to 1.0.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1680143762338/4797fa1f-045e-451a-99d7-31fd15a5b716.png align="center")

In conclusion, the `ProgressView` is a powerful UI element in SwiftUI that allows us to indicate the progress of a task or action. By using the customization options and the `onChange` modifier, we can create progress views that fit the style of our app and handle the completion of a task in a meaningful way.

That’s all of today’s post. I hope it helps and let me know if it is by leaving a comment. Don’t forget to subscribe to my newsletter if you’d like to receive posts like this via email.

I’ll see you in the next post!