３つの円が、中心の大きな円の円周を滑り落ちるように回るアニメーションです。

ProgressCircle.swift

import SwiftUI

struct ProgressCircle: View {
    @State private var animate = false
    let colors = [Color.blue, Color.green, Color.yellow, Color.orange, Color.red, Color.purple] // Colors for each circle
    @State private var colorIndex = [0, 0, 0] // Initial color index for each circle
    @State private var percentage: Int = 0
    let timer2 = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    @State private var opacity = 1.0
    
    var body: some View {
        ZStack {
            Circle() // Outer circle
                .frame(width: 250, height: 250)
                .foregroundColor(.gray)
                .opacity(0)
            
            Text("\(percentage)%")
                .font(.system(size: 30)) // smaller font size
                .foregroundColor(Color.gray)
                .opacity(opacity)
                .onReceive(timer2) { _ in
                    if percentage < 100 {
                        percentage += Int.random(in: 1...5)
                        if percentage >= 100 {
                            percentage = 100
                            DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                                withAnimation(.linear(duration: 1.0)) {

                                }
                                DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                                    withAnimation(.linear(duration: 0.4)) {
                                        self.opacity = 0
                                    }
                                }
                            }
                        }
                    }
                }
            
            ForEach(0..<3) { index in
                Circle() // Moving circle
                    .frame(width: 20, height: 20)
                    .foregroundColor(self.colors[self.colorIndex[index]])
                    .offset(y: 50) // Set the radius of the outer circle here
                    .rotationEffect(.degrees(self.animate ? 360 : 0))
                    .animation(
                        Animation
                            .timingCurve(0.1, 0.7, 0.9, 0.2, duration: 1.9)
                            .repeatForever(autoreverses: false)
                            .delay(Double(index) * 0.5)
                    )
            }
            .opacity(opacity)
            .onAppear() {
                self.animate = true
                Timer.scheduledTimer(withTimeInterval: 1.9, repeats: true) { timer in
                    self.colorIndex = self.colorIndex.map { ($0 + 1) % self.colors.count }
                }
            }
        }
    }
}

struct ProgressCircle_Previews: PreviewProvider {
    static var previews: some View {
        ProgressCircle()
    }
}