Чтобы добиться анимации загрузки, прогресс всегда должен начинаться с 0 и заканчиваться на 1.

Первая проблема:

В вашей функции прогресса вы устанавливаете прогресс в соответствии с текущим индексом и счетчиком. В результате последний слайд начинается со 100 %, что, насколько я понимаю, не является ожидаемым результатом.

Второй выпуск:

Чтобы добиться полной анимации каждого пузырька, вам нужно будет рассчитать время загрузки на основе статического значения — скорости, которую вы хотите достичь. Например. 7,5 секунд из 100 (измените это значение по своему желанию).

Я отредактировал ваш код, как показано ниже. Ниже я бы предложил лучшее решение для достижения анимации. Надеюсь, поможет!

struct SoleInAppNotifications: View {
    //...
    @State private var progress: CGFloat = 0

    let timer = Timer.publish(every: 7.5/100,
                              on: .main,
                              in: .common).autoconnect()

    //...

    var body: some View {
        //...
        BubbleView(progress: $progress,
                   isActive: index == currentIndex,
                   counter: currentIndex,
                   countTo: 5)
        //...
        .onReceive(timer) { _ in
            withAnimation {
                if progress < 1 {
                    progress += 1/100
                } else if !isPaused, currentIndex < 5 {
                    currentIndex = (currentIndex + 1)
                    progress = 0
                }
            }
        }
    }
}

struct BubbleView: View {
    @Binding var progress: CGFloat

    //...

    /* Remove this function
    func progress() -> CGFloat {
        return (CGFloat(counter) / CGFloat(countTo))
    }*/
}

Ниже показано, как бы я это сделал:

(хотя и базовая реализация, все же можно использовать некоторые улучшения)

class Bubble {
    var counter: CGFloat
    var countTo: CGFloat
    var i: CGFloat
    var isActive: Bool
    var progress: CGFloat
    
    init(counter: CGFloat,
         countTo: CGFloat,
         i: CGFloat,
         isActive: Bool,
         progress: CGFloat) {
        self.counter = counter
        self.countTo = countTo
        self.i = i
        self.isActive = isActive
        self.progress = progress
    }
}

struct SoleInAppNotifications: View {
    @StateObject private var vm = ViewModel()
    
    let animationTimer = Timer.publish(every: 7.5/100,
                                       on: .main,
                                       in: .common).autoconnect()
    
    var body: some View {
        HStack(spacing: .zero) {
            Image("raiff")
                .padding(.trailing, 17)
            
            VStack(alignment: .leading, spacing: .zero) {
                Text("Notification #1")
                    .foregroundColor(.white)
                    .lineLimit(1)
                    .padding(.bottom, 1)
                Text("Notification body")
                    .foregroundColor(.white)
                    .lineLimit(2)
            }
            
            VStack(spacing: .zero) {
                ForEach(vm.bubbles.indices, id: \.self) { i in
                    BubbleView(bubble: $vm.bubbles[i])
                        .onChange(of: vm.currentIndex) { _, _ in
                            vm.bubbles[i].isActive = CGFloat(i) == vm.currentIndex
                        }
                        .onChange(of: vm.progress) { _, _ in
                            vm.bubbles[i].progress = vm.progress
                        }
                }
            }
        }
        .frame(maxWidth: .infinity)
        .padding(17)
        .background(Color.black)
        .onReceive(animationTimer){ _ in
            withAnimation {
                if vm.progress < 1 {
                    vm.progress += 1/100
                } else if vm.currentIndex < 5 {
                    vm.currentIndex += 1
                    vm.progress = 0
                }
            }
        }
    }
}

extension SoleInAppNotifications {
    class ViewModel: ObservableObject {
        @Published var bubbles: [Bubble]
        @Published var currentIndex: CGFloat = 0
        @Published var progress: CGFloat = 0
        
        init() {
            self.bubbles = []
            for i in 0..<5 {
                bubbles.append(Bubble(counter: currentIndex,
                                      countTo: 5,
                                      i: CGFloat(i),
                                      isActive: i == 0 ? true : false,
                                      progress: progress))
            }
        }
    }
}

struct BubbleView: View {
    @Binding var bubble: Bubble
    
    var body: some View {
        if bubble.isActive {
            RoundedRectangle(cornerRadius: 3)
                .fill(Color.gray)
                .frame(width: 6, height: 24)
                .overlay(
                    RoundedRectangle(cornerRadius: 3)
                        .trim(from:0,
                              to: bubble.progress)
                        .foregroundColor(
                            (completed ? Color.gray : Color.white)
                        )
                ).animation(
                    .easeInOut(duration: 0.2)
                )
        } else {
            Circle()
                .fill(Color.gray)
                .frame(width: 6, height: 6)
                .animation(.easeInOut)
                .padding(4)
        }
    }
    
    var completed: Bool {
        bubble.progress == 1
    }
}