How to show progress on a task using ProgressView

Paul Hudson @twostraws December 1st 2022

Updated for Xcode 14.2

SwiftUI’s ProgressView can be bound to a Double to show a horizontal progress bar. For example, this creates a progress bar with the title “Downloading”, that will read downloadAmount to determine how full the progress bar should be:

struct ContentView: View {
    @State private var downloadAmount = 0.0

    var body: some View {
        VStack {
            ProgressView("Downloading…", value: downloadAmount, total: 100)
        }
    }
}

Download this as an Xcode project

The text “Downloading” over an almost empty progress bar.

In practice, you’ll need some way to actually change that value, such as a timer, a network request, or other user interface. For example, this will fill the progress bar up over a few seconds:

struct ContentView: View {
    @State private var downloadAmount = 0.0
    let timer = Timer.publish(every: 0.1, on: .main, in: .common).autoconnect()

    var body: some View {
        ProgressView("Downloading…", value: downloadAmount, total: 100)
            .onReceive(timer) { _ in
                if downloadAmount < 100 {
                    downloadAmount += 2
                }
            }
    }
}

Download this as an Xcode project

Note: Xcode will get angry if you set your progress value higher than the progress total – make sure you cap it as you can see above.