CircleProgressView.swift

import SwiftUI

struct ContentView: View {
    // 進捗
    @State private var progress: Float = 0.3
    
    var body: some View {
        VStack {
            // 進捗ビュー (青)
            CircleProgressView(progress: $progress,
                               lineColor: .blue,
                               lineWidth: 20,
                               lineCap: .square,
                               textColor: .blue,
                               textFont: .system(size: 25, weight: .black, design: .default))
                .frame(width:100, height: 100)
                .padding()
            
            // 進捗ビュー (赤)
            CircleProgressView(progress: $progress,
                               lineColor: .red,
                               lineWidth: 10,
                               lineCap:.butt,
                               textColor: Color(UIColor.systemGray),
                               textFont: .system(size: 18, weight: .thin, design: .monospaced))
                .frame(width:70, height: 70)
                .padding()
            
            // 進捗ビュー (黄)
            CircleProgressView(progress: $progress,
                               lineColor: .yellow,
                               lineWidth: 20,
                               lineCap:.round,
                               textColor: .primary,
                               textFont: .largeTitle)
                .frame(width:120, height: 120)
                .padding()
            
            // ステッパー
            Stepper("進捗", value: $progress, in: 0...1, step: 0.1)
                .padding(.horizontal, 100)
                .padding(.vertical)
        }
    }
    
}

/// 進捗ビュー
struct CircleProgressView: View {
    
    /// 進捗
    @Binding var progress: Float
    /// 線の色
    let lineColor: Color
    /// 線の太さ
    let lineWidth: CGFloat
    /// 線の端
    let lineCap: CGLineCap
    /// 文字の色
    let textColor: Color
    /// 文字の書式
    let textFont: Font?
    
    var body: some View {
        ZStack {
            // 薄い円
            Circle()
                .stroke(lineColor, lineWidth: lineWidth)
                .opacity(0.2)
            
            // 進捗の円
            Circle()
                .trim(from: 0.0, to: CGFloat(min(progress, 1.0))) // 線の長さを指定
                .stroke(lineColor, style: StrokeStyle(lineWidth: lineWidth,
                                                      lineCap: lineCap))
                .rotationEffect(.degrees(-90.0)) // 線を上から開始させる
                .animation(.linear) // 線をAnimationさせる
            
            // パーセント
            Text("\(Int(min(progress, 1.0) * 100))%")
                .font(textFont)
                .foregroundColor(textColor)
        }
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
            ContentView()
                .preferredColorScheme(.dark)
        }
        .previewLayout(.sizeThatFits)
    }
}