How to show progress on a task using ProgressView

About 2 min

How to show progress on a task using ProgressView 관련

SwiftUI by Example

Back to Home

How to show progress on a task using ProgressView | SwiftUI by Example

How to show progress on a task using ProgressView

Updated for Xcode 15

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 projectopen in new window

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
                }
            }
    }
}