Add a Progress View to a Navigation Bar in SwiftUI

Written by Team Kodeco

Are you looking to display progress in your app’s navigation bar? Look no further than SwiftUI’s ProgressView! With just a few lines of code, you can add a progress bar to your app’s navigation bar and give your users a clear indication of how much progress has been made.

To get started, simply add a ProgressView to your navigation stack as follows:

struct ContentView: View {
  var body: some View {
    NavigationStack {
      VStack {
        Text("Hello, World!")
      }
      .toolbar {
        ToolbarItem(placement: .navigationBarTrailing) {
          ProgressView()
        }
      }
    }
  }
}

By default, the ProgressView will display an indeterminate progress bar, meaning that it will animate continuously until it is stopped. However, you can customize the progress bar’s style using the progressViewStyle modifier.

For example, to show a determinate progress bar with a blue accent, you can add the following modifier to ProgressView:

.progressViewStyle(LinearProgressViewStyle(tint: Color.blue))

If you prefer a circular progress bar, you can use the CircularProgressViewStyle instead:

.progressViewStyle(CircularProgressViewStyle(tint: Color.blue))

And that’s it! With just a few lines of code, you can add a progress bar to your app’s navigation bar in SwiftUI. Happy coding!