ProgressView in SwiftUI

Almost everyone hates the buffering screen we get due to low internet or the app processing something. Well, but since 5G is here in India, there are less chances of you spending your day just staring at a progress view.

Even though we all hate it, making a progress view in your app is inevitable and at some point, you would have to use it in our app. May it be for showing process while you save something to CoreData or to show progress while you are getting something from URLSession.

Looking back at UIKit, you would use UIActivityIndicator for showing a spinner and UIProgressView for showing a linear progress bar in your app. In SwiftUI, you can implement both of these types of progress view in your app using ProgressView.

Without further ado, let’s dive into the human interface guidelines summary first.

Summary of Human Interface Guidelines

Note: Determinate Progress View means a progress view with a task with well known duration. While Indeterminate Progress View means a progress view with a unquantifiable task and unkown duration.

• If possible, use determinate progress view.

• When possible, give people option to stop the process. When stopping the process has a negative consequence, let people know or give a confirmation alert dialogue.

• Stick to one progress bar style - circular or bar style.

• Keep the progress bar moving to let people know the progress.

• Show it at consistent location.

Source: Apple

Basic implementation

Let's make a basic progress view - also called circular progress view.

  ProgressView("Processing") // 1

1. Using a ProgressView with string initializer.

Pretty simple to implement, right?

There are two types of styles availabe. One is the circular style (the default progress view style) which you tried above. The second is linear progress bar which updates according to the value given. You are most likely to encounter the latter while displaying download tasks or something similar.

So let's try to implement a linear progress bar that updates regularly.

  @State var value : Float = 0
    var body: some View {
    // 1 
        ProgressView("Processing", value: value, total: 100)
            .progressViewStyle(LinearProgressViewStyle())
            .padding()
            .onAppear {
            // 2
                Timer.scheduledTimer(withTimeInterval: 1, repeats: true) { _ in
                    self.value += 1
                }
            }
    }

1. Using ProgressView with the title "Procressing", setting the current value of the progress bar to value and the total value of the progress bar to 100.

2. For simplicity sake, on appear, you use a timer and increase value by 1, every second. In real life, you could update the value while loading a URLSession data task or something similar to that.

Styling

There is not a lot that you can customize in this but the most handy style modifiers are tint and foregroundColor.

      ProgressView("Processing")
            .tint(.orange) // 1 
            .foregroundColor(.gray) // 2

Code Explanation:

1. Setting tint color to orange. This will set the spinning view to orange.

2. Setting foreground color to gray. This will set the label color to gray.

You can also apply the same to the linear progress bars.

  ProgressView("Processing")
            .progressViewStyle(LinearProgressViewStyle()) // 1 
            .tint(.orange)
            .foregroundColor(.gray)

Code Explanation:

1. Setting the progress view style to linear progress bar.

---

Wrapping up, today you learned about how to show a progress bar in a couple of ways (linear progress bar and circular progress bar) and about stylizing the appearance.

Eat. Sleep. Swift Anytime. Repeat.