Custom ProgressView in a SwiftUI widget

Question

I’m trying to add a linear ProgressView to a SwiftUI Widget that counts up over time and uses a LinearGradient instead of a solid color for the progress bar.

First I tried using the built-in ProgressView with a ProgressViewStyle but I notice that it stops counting up after I add the ProgressViewStyle:

ProgressView(
 timerInterval: (.now...endDate),
 countsDown: false,
 label: {EmptyView()},
 currentValueLabel: {
 EmptyView()
 }
)
.progressViewStyle(
 GradientLinearProgressViewStyle(
 gradient: LinearGradient(
 colors: [.red, .green],
 startPoint: .leading,
 endPoint: .trailing
 )
 )
)

As an alternative, I tried masking a LinearGradient with a ProgressView, which does animate correctly:

Capsule()
 .fill(
 LinearGradient(
 colors: [.green.opacity(0.3), .red],
 startPoint: .leading,
 endPoint: .trailing
 )
 )
 .mask(alignment: .leading) {
 ProgressView(
 timerInterval: (.now...endDate),
 countsDown: false,
 label: { EmptyView() },
 currentValueLabel: { EmptyView() }
 )
 .scaleEffect(y: 7, anchor: .center)
 }

This approach restores the animation, but it introduces an unwanted gradient background behind the progress bar like so: bad background

Is there a proper or recommended way to create a custom linear ProgressView with a gradient in a SwiftUI widget without breaking the timer-based animation or introducing background artifacts?