Change size (height) of ProgressView in SwiftUI

Question

I created a ProgressView in SwiftUI (using Xcode) and edited a bit but haven’t figured out how to change its height.

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView("Progres:", value: 50, total: 100)
        }.foregroundColor(Color(UIColor.systemBlue))
        .scaleEffect(1, anchor: .center)
        .accentColor(Color(UIColor.systemGreen))
    }
}

Try the `.scaleEffect` modifier as answered [here](https://developer.apple.com/forums/thread/652733) — aheze, Nov 20 '20 at 20:33
I tried that but that changed the whole ProgressView, not just the linear line as I want. — Michal1, Nov 20 '20 at 21:05
Must see this https://serialcoder.dev/text-tutorials/swiftui/progressview-in-swiftui/ — Hwangho Kim, Jul 21 '21 at 07:08

score 34 · Accepted Answer · answered Nov 20 '20 at 21:32

There's no direct way that I know of to change the height, but you can use the .scaleEffect modifier. Make sure to specify 1 for the x scale in order to only increase the height.

struct ContentView: View {
    var body: some View {
        ProgressBar()
        .padding([.leading, .trailing], 10)
    }
}

struct ProgressBar: View {
    var body: some View {
        VStack {
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

Result:

A drawback to this is that you can't pass in a Label, because it will also get stretched.

ProgressView("Progress:", value: 50, total: 100)

To work around this, just make your own Text above the ProgressView.

struct ProgressBar: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Progress:")
            .foregroundColor(Color.blue)
            
            ProgressView(value: 50, total: 100)
            .accentColor(Color.green)
            .scaleEffect(x: 1, y: 4, anchor: .center)
        }
    }
}

It works but Can you create Rounded Corners in that ProgressView? How? — CGR, Jul 16 '21 at 07:35
@CGR it's hard to customize stuff like ProgressView that are from the system. It might be easier to just [make your own progress bar](https://www.simpleswiftguide.com/how-to-build-linear-progress-bar-in-swiftui/). — aheze, Jul 16 '21 at 20:05

score 14 · Answer 2 · answered Jan 12 '21 at 15:03

I needed something with a more rounded radius and without concealing the ProgressView inside another View so here's my take on it (extending @aheze 's answer by using the scale effect)

struct MyProgressViewStyle: ProgressViewStyle {
  var myColor: Color

  func makeBody(configuration: Configuration) -> some View {
      ProgressView(configuration)
          .accentColor(myColor)
          .frame(height: 8.0) // Manipulate height, y scale effect and corner radius to achieve your needed results
          .scaleEffect(x: 1, y: 2, anchor: .center)
          .clipShape(RoundedRectangle(cornerRadius: 6))
          .padding(.horizontal)
  }
}
// Here's how to use it inside a View
ProgressView(value: currentProgress, total: totalProgress)
            .progressViewStyle(MyProgressViewStyle(myColor: Color.green))

This is the correct answer. You can customize ProgressView with a ProgressViewStyle. The accepted answer is a hack. — Engin Kurutepe, Aug 31 '23 at 08:14

Change size (height) of ProgressView in SwiftUI

2 Answers2