aaptho/CompletionRingsView

A pure SwiftUI View that renders one or more circular completion indicators, which can go past 100%

CompletionRingsView

A pure SwiftUI View that renders one or more circular completion indicators, which can go past 100%

Demo Video

Rings.demo.mov

Example Usage

// Renders a single static ring
struct SingleRingPreview: View {
    let ring = Ring(
        completion: 0.5,
        startColor: UIColor.blue.cgColor
        endColor:   UIColor.red.cgColor
    )
    
    var body: some View {
        CompletionRingView(ring: ring)
            .padding(20)
    }
}

// Renders a single ring, which animates from 0% to 250% and back again
struct AnimatedSingleRingPreview: View {
    @State private var ring = Ring(
        completion: 0,
        startColor: UIColor.blue.cgColor
        endColor:   UIColor.red.cgColor
    )
    
    private let animation = Animation
        .easeInOut(duration: 3)
        .repeatForever(autoreverses: true)
    
    var body: some View {
        CompletionRingView(ring: ring)
            .padding(20)
            .onAppear {
                withAnimation(animation) {
                    ring.completion = 2.5
                }
            }
    }
}

// Renders multiple rings and animates them
struct AnimatedMultipleRingPreview: View {
    @State private var rings: [Ring] = [
        Ring(
            completion: 0,
            startColor: UIColor.blue.cgColor
            endColor:   UIColor.red.cgColor
        ),
        Ring(
            completion: 0,
            startColor: UIColor.red.cgColor
            endColor:   UIColor.yellow.cgColor
        ),
        Ring(
            completion: 0,
            startColor: UIColor.yellow.cgColor
            endColor:   UIColor.green.cgColor
        ),
    ]
    
    private let animation = Animation
        .easeInOut(duration: 3)
        .repeatForever(autoreverses: true)
    
    var body: some View {
        CompletionRingsView(rings: rings)
            .padding(20)
            .onAppear {
                withAnimation(animation) {
                    rings[0].completion = 0.75
                    rings[1].completion = 1.25
                    rings[2].completion = 1.75
                }
            }
    }
}