SwiftUI 簡易的な Active Indicatorを作る

Tweet

Pocket

SwiftUIの部品にはインジケータがないようなのでCircleを使って簡易的にインジケータを作成します。コードを書く量は少しです。

struct ActiveIndicatorOne: View {
    @State var anim = false
    var body: some View {
        Circle().trim(from: 0, to: 0.7)
            .stroke(AngularGradient(gradient:
                .init(colors: [Color.blue, Color.blue.opacity(0.1)]), center: .center),
                    style: StrokeStyle(lineWidth: 8.0, lineCap: .round) )
            .rotationEffect(Angle(degrees: anim ? 360 : 0 ))
            .animation(Animation.linear(duration: 0.5).repeatForever(autoreverses: false))
            .onAppear(){
                self.anim.toggle()
                
        }
        .frame(width: 50, height: 50)
    }
}

これだけです。