Skip to content

Improving UX Using ProgressView

by: Rob Maltese

Posted on:February 18, 2023 at 03:06 PM

The users experience is extremely important, and in my opinion there’s nothing worse then trying to interact with what seems like a frozen application. So what can we do to fix that awkward stage between displaying content to our users, and the loading state while our application is processing our requests? Progress indicators!

Loading image from Unsplash.

We’re working here!

Progress indicators help your users know that your app hasn’t stalled out, rather it is in a loading state working behind the scenes while it performs some sort of operation. There are two types of progress indicators that we can use, and it is based on whether or not we know the duration of an operation.

Thankfully SwiftUI provides us with a few handy progress indicators to help us display progress indicators and loading states to our users.

Just the basics

The most simple, and basic way to display a simple loading indicator to let your users know you’re loading something is with ProgressView(). It doesn’t get much easier then that!

struct ContentView: View {
  var body: some View {

The above code displays a clean and simple loading spinner. Basic SwiftUI ProgressView spinner.

Lets get linear

We can add a little bit of flair by changing the default ProgressView() style to LinearProgressViewStyle() by adding the value parameter which accepts a Float.

struct ContentView: View {
  var body: some View {
    ProgressView(value: 1.0)
Basic SwiftUI ProgressView linear example.

This code will display a filled linear progress view. Animating the view on change appeared a bit tricky to me, so I did what any good developer does… Googles the crap out of an issue and lands on Stack Overflow. to fix the problem. A bit of that code, leads us to this beautiful animated linear progress view.

When should I use ProgressView?

Real life examples are the best learning tool, and recently I had the chance to learn that lesson. In this view, a user is displayed the current response time for the servers however, while the data is loading I unfortunately am showing -99 which is my optional string return. What should be showed here is progress view spinners rather then what is.

Image showing a vertical line of progress view spinners

The best place to learn about user experience, is the Apple Human Interface Guidelines.