How to make Large size ProgressView in SwiftUI

⋅ 2 min read ⋅ SwiftUI ProgressView iOS 16

Table of Contents

ProgressView is a view that shows that a task is in progress.

You can think of it as a loading indicator.

In UIKit, we have UIActivityIndicatorView which is a UIKit quivalent to ProgressView.

UIActivityIndicatorView has two styles which dictate its size.

  1. Medium
  2. Large
UIActivityIndicatorView(style: .medium)
UIActivityIndicatorView(style: .large)
Medium and large size UIActivityIndicatorView.
Medium and large size UIActivityIndicatorView.

In iOS 16, we can also set the size of a ProgressView, but it isn't straightforward as we do in UIKit.

How to change ProgressView size in SwiftUI

To change the size of a ProgressView, you have to use controlSize(_:) modifier.

We have four sizes to choose from, but ProgressView only supported three of them.

  1. mini
  2. small
  3. regular
  4. large

Apply the controlSize modifier and specify the size that you want.

ProgressView()
.controlSize(.mini)
ProgressView()
.controlSize(.small)
ProgressView()
.controlSize(.regular)
ProgressView()
.controlSize(.large)

Here is the result.

  • The default size, regular, is equivalent to ActivityIndicator(style: .medium).
  • The large size is equivalent to ActivityIndicator(style: .large).
  • And we can also make it smaller than that with mini and small sizes.
ProgressView compared to UIActivityIndicatorView.
ProgressView compared to UIActivityIndicatorView.

You can easily support sarunw.com by checking out this sponsor.

Sponsor sarunw.com and reach thousands of iOS developers.

Before iOS 16

Control a ProgressView size with controlSize(_:) only works in iOS 16.

So, to change the size for iOS 15 and prior, you need to rely on the scaleEffect modifier, which can scale the view up and down based on the passing scale factor.

Here is an example where we try to replicate small and large sizes using .scaleEffect.

ProgressView()
.scaleEffect(0.7)
ProgressView()
.scaleEffect(1.74)

.scaleEffect can replicate the size, but there are some downsides.

  • The view becomes blurry when scaled up.
  • The frame stays the same (indicated by the pink border in the below example). So, you might need to adjust your view layout manually.
  • Since it is just scaled up and down from the original size, the final result doesn't match the standard component.

All of these points are subtle enough, so I think you can get away with this trick.

ProgressView will scaleEffect.
ProgressView will scaleEffect.

Read more article about SwiftUI, ProgressView, iOS 16, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to use SFSafariViewController in SwiftUI

In this article, I will teach you what I think is the proper way to present SFSafariViewController in a SwiftUI app.

Next
Detecting if SwiftUI app is in Xcode Previews

Learn how to detect whether an app is running in Xcode Previews.

← Home