How it works
ProgressViewStyle is the protocol that defines how a ProgressView renders itself, separating a progress indicator's appearance from the value it reports. Rather than hard-coding a bar or a spinner, you adopt a style and apply it with the progressViewStyle(_:) modifier, letting the same ProgressView present as a horizontal bar, a circular indicator, or a custom design. Reach for it when you want consistent progress styling across a view hierarchy, or when you need a bespoke look that the built-in styles don't provide.
Apply a style with progressViewStyle(_:)
The progressViewStyle(_:) modifier attaches a ProgressViewStyle to a ProgressView and, by propagating through the environment, to every progress view beneath it. In the example each
ProgressViewreceives its own style, so the first renders one way and the second another even though both reportvalue: 0.6.Choose a built-in style: .linear
The .linear style conforms to ProgressViewStyle and draws determinate progress as a horizontal bar that fills according to the reported fraction. Here
.progressViewStyle(.linear)turnsProgressView(value: 0.6)into a bar filled to sixty percent.Choose a built-in style: .circular
The .circular style is the ProgressViewStyle that presents progress as a ring or spinner, well suited to compact or indeterminate contexts. Applying
.progressViewStyle(.circular)toProgressView("Loading", value: 0.6)renders the circular form, with the label supplied to the ProgressView shown alongside it.Implement makeBody(configuration:) for a custom style
To define your own look, conform a type to ProgressViewStyle and implement the required makeBody(configuration:) method. SwiftUI calls it with a Configuration whose fractionCompleted and label describe the current state, and you return the view that draws them; the built-in
.linearand.circularstyles are simply ready-made conformances you can use in place of a custom one.
.progressViewStyle(.circular) on the second ProgressView for .progressViewStyle(.linear) to see both indicators render as bars from the same value: 0.6.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct ProgressViewStyleDemo: View {
var body: some View {
VStack(spacing: 24) {
ProgressView(value: 0.6)
.progressViewStyle(.linear)
ProgressView("Loading", value: 0.6)
.progressViewStyle(.circular)
}
.padding()
}
}