Structures that conform to the
ProgressViewStyle protocol can be used to modify the appearance of
The structure that you pass to the
progressViewStyle(_:) modifier applies to all
ProgressView instances in the children of that
In this example, the same style is applied to two
ProgressView instances that are children of a
Although a custom
background were set in the example above, these modifiers were overridden by the
DefaultProgressViewStyle. This style sets
Color.gray.opacity(0.1). As the default opacity of the background is 0.1, any content behind the
ProgressView will be visible in the unfilled portion of the loading bar.
To swap the colors, you can approximate how
Color.gray.opacity(0.1) would look on a given background.
Swapping the default colors will cause the blue background to show through the translucent gray, so it won't look right.
To create a
ProgressViewStyle that inverts the direction of the animation, use a
ProgressView can be achieved by rotating 90 degrees, but this will not make enough vertical space for it to display within the available space. Make use of
GeometryReader instead to allow the view to scale accordingly. You should probably use the
offset modifier to keep it in the center, otherwise the rotation will still cause it to move out of bounds.
To invert the direction of progress in the vertical style, merely apply the
rotation3DEffect(_:axis:anchor:anchorZ:perspective:)` modifier as before.
In case you’re wondering, here’s how to use them all and recreate the GIF at the beginning.