How To Use ProgressViewStyle For Vertical and Reversed Loading Bars

Daily Coding Tip 035

Structures that conform to the ProgressViewStyle protocol can be used to modify the appearance of ProgressView.

The structure that you pass to the progressViewStyle(_:) modifier applies to all ProgressView instances in the children of that View.

In this example, the same style is applied to two ProgressView instances that are children of a VStack:

Although a custom accentColor and background were set in the example above, these modifiers were overridden by the DefaultProgressViewStyle. This style sets accentColor to Color.blue and background to 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 rotation3DEffect(_:axis:anchor:anchorZ:perspective:) modifier.

A vertical 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.


Get more Daily Coding Tips in your inbox!