Customize the Style of Progress Indicators in SwiftUI

Written by Team Kodeco

Creating a progress indicator in SwiftUI allows for ample customization to align with your app’s design. This entry will demonstrate how to modify the color and style of a progress bar.

You can adjust the color of a progress bar utilizing the accentColor modifier. This modifier alters the color for all control elements within a view, inclusive of progress bars. Consider the example below:

ProgressView(value: 0.5)
  .accentColor(.blue)

In the above code snippet, the accent color is set to blue, which subsequently changes the progress bar’s color to blue.

You can also modify the progress bar style with the progressViewStyle modifier. This modifier accepts a view that conforms to the ProgressViewStyle protocol.

Choosing a Progress View Style in SwiftUI

SwiftUI provides several built-in progress view styles:

• DefaultProgressViewStyle is the default style provided by SwiftUI, which adapts to the platform and environment settings of the application. Use this when you want your progress view to match the default system style, and you don’t have specific styling requirements for your progress view. This could be used in a variety of situations such as showing the progress of a file download or a long computation.

• CircularProgressViewStyle displays progress as a circular, rotating activity indicator, which can either be indeterminate (spinning without displaying specific progress) or determinate (showing progress as a partial circle). This style is useful when the exact progress is either not known or not important to convey. For example, in a weather app while fetching the latest data, a circular progress view can be shown as the data load time could vary and does not have a defined end point.

• LinearProgressViewStyle presents progress as a horizontal bar, also known as a progress bar, which is filled from left to right. This style is best used when you want to give the user a visual representation of the completion level of a known, finite task. For instance, in a file upload process in a cloud storage app, showing a linear progress bar helps users understand how much of the upload has completed and how much is remaining.

Here’s an example of how to apply the CircularProgressViewStyle:

ProgressView(value: 0.5)
  .progressViewStyle(.circular)

In this snippet, the CircularProgressViewStyle is applied to the progress bar, which morphs it into a circular shape.

You can even define a custom progress view style by creating a struct that conforms to the ProgressViewStyle protocol. Here’s an example:

struct ContentView: View {
  var body: some View {
    CustomProgress()
  }
}

struct CustomProgress: View {
  @State private var progressValue = 0.5
  var body: some View {
    ProgressView(value: progressValue)
      .progressViewStyle(CustomProgressViewStyle())
      .onAppear {
        Timer.scheduledTimer(withTimeInterval: 0.1, repeats: true) { timer in
          if progressValue < 1.0 {
            progressValue += 0.01
          } else {
            timer.invalidate()
          }
        }
      }
  }
}

struct CustomProgressViewStyle: ProgressViewStyle {
  func makeBody(configuration: Configuration) -> some View {
    VStack {
      ProgressView(value: configuration.fractionCompleted)
        .accentColor(configuration.fractionCompleted! < 1.0 ? .red : .blue)
      Text("\(Int((configuration.fractionCompleted ?? 0) * 100))%")
    }
  }
}

Your preview should look like this:

In this example, you’ve created a custom progress view style that displays the progress percentage and modifies the color based on whether the progress is currently animating.

By using these techniques, you’re equipped to create progress bars that seamlessly align with the style of your app, contributing to an engaging user experience.