SwiftUI Animate Custom Progress Bar - swift

Question

I created this custom progress view with bars for the progress, how can I animate the the green color in the next bar when it's time to go to the next element? I am looking for it to fill the bar slowly from left to right
struct ContentView: View {
var body: some View {
ProgressBar(lastIndex: 8, currentIndex: 4)
.padding(.horizontal, 23)
.padding(.top, 10)
Spacer()
}
}
struct ProgressBar: View {
var lastIndex: Int
var currentIndex: Int
var body: some View {
HStack(alignment: .center, spacing: 4) {
ForEach(0...lastIndex, id: \.self) { i in
BarElement(selected: i <= currentIndex)
}
}
}
}
struct BarElement: View {
var selected: Bool
var body: some View {
Capsule()
.fill(selected ? .green : Color(UIColor.lightGray))
.frame(width: 33, height: 5, alignment: .center)
}
}

Answer 1

It's hard to answer without code but if you have all separated rectangles, it should be enough using .animation(.linear) on all the rectagles, so when the values changes it should animated as you asked.
This will do what you wanted.
struct BarElement: View {
var value : CGFloat = 0.0
var selected: Bool
var body: some View {
ZStack (alignment: .leading){
Capsule()
.fill(Color(UIColor.lightGray))
.frame(width: 33, height: 5, alignment: .leading)
.animation(.linear, value: selected)
Capsule()
.fill(.green)
.frame(width: selected ? 33 : 0, height: 5, alignment: .leading)
.animation(.linear, value: selected)
}
}
}