ProgressView

struct · iOS 14.0+ · SDK 27.1

nonisolated struct ProgressView<Label, CurrentValueLabel> where Label : View, CurrentValueLabel : View

A view that shows the progress toward completion of a task. Use a progress view to show that a task is incomplete but advancing toward completion. A progress view can show both determinate (percentage complete) and indeterminate (progressing or not) types of progress. Create a determinate progress view by initializing a `ProgressView` with a binding to a numeric value that indicates the progress, and a `total` value that represents completion of the task. By default, the progress is `0.0` and the total is `1.0`. The example below uses the state property `progress` to show progress in a determinate `ProgressView`. The progress view uses its default total of `1.0`, and because `progress` starts with an initial value of `0.5`, the progress view begins half-complete. A "More" button below the progress view allows people to increment the progress in increments of five percent: struct LinearProgressDemoView: View { @State private var progress = 0.5 var body: some View { VStack { ProgressView(value: progress) Button("More") { progress += 0.05 } } } }  To create an indeterminate progress view, use an initializer that doesn't take a progress value: var body: some View { ProgressView() }  You can also create a progress view that covers a closed range of <doc://com.apple.documentation/documentation/Foundation/Date> values. As long as the current date is within the range, the progress view automatically updates, filling or depleting the progress view as it nears the end of the range. The following example shows a five-minute timer whose start time is that of the progress view's initialization: struct DateRelativeProgressDemoView: View { let workoutDateRange = Date()...Date().addingTimeInterval(5*60) var body: some View { ProgressView(timerInterval: workoutDateRange) { Text("Workout") } } }  ### Styling progress views You can customize the appearance and interaction of progress views by creating styles that conform to the ``ProgressViewStyle`` protocol. To set a specific style for all progress view instances within a view, use the ``View/progressViewStyle(_:)`` modifier. In the following example, a custom style adds a rounded pink border to all progress views within the enclosing ``VStack``: struct BorderedProgressViews: View { var body: some View { VStack { ProgressView(value: 0.25) { Text("25% progress") } ProgressView(value: 0.75) { Text("75% progress") } } .progressViewStyle(PinkBorderedProgressViewStyle()) } } struct PinkBorderedProgressViewStyle: ProgressViewStyle { func makeBody(configuration: Configuration) -> some View { ProgressView(configuration) .padding(4) .border(.pink, width: 3) .cornerRadius(4) } }  SwiftUI provides two built-in progress view styles, ``ProgressViewStyle/linear`` and ``ProgressViewStyle/circular``, as well as an automatic style that defaults to the most appropriate style in the current context. The following example shows a circular progress view that starts at 60 percent completed. struct CircularProgressDemoView: View { @State private var progress = 0.6 var body: some View { VStack { ProgressView(value: progress) .progressViewStyle(.circular) } } }  On platforms other than macOS, the circular style may appear as an indeterminate indicator instead.

Members (0)

This type has no directly callable members in this snapshot. See the framework’s skipped declarations for unsupported APIs.

All SwiftUI types →