Source code for CodeSlicing episode on simple circular activity indicators

CircularActivityIndicatorDemo.swift

//
//  CircularActivityIndicatorDemo.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:
//
//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Copyright © 2021 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

private extension Color {
    static let clearRed = Color.red.opacity(0)
}

struct CircularActivityIndicatorDemo: View {
    var body: some View {
        GeometryReader { (geo: GeometryProxy) in
            let numSegments = 12
            let fractionalRotationPerSegment = 1 / numSegments.asDouble
            ZStack {
                Color.clear
                ForEach(0..<numSegments) { index in
                    Capsule()
                        .frame(geo.sizeScaled(0.25, 0.06))
                        .xOffset(geo.widthScaled(0.37))
                        .rotate(.cycle(fractionalRotationPerSegment * index.asDouble))
                }
            }
            .mask(
//            .background(
                CircularActivityIndicatorMask().scale(1.2).blur(geo.widthScaled(0.05)))
        }
    }
}

private struct CircularActivityIndicatorMask: View {
    
    @State private var animating = false
    
    var body: some View {
        AngularGradient([
            (.clearRed, 0.4),
            (.red, 1),
        ], angle: animating ? 360.degrees : 0.degrees)
            .onAppear {
                withAnimation(Animation.linear(duration: 1).repeatForever(autoreverses: false)) {
                    animating = true
                }
            }
    }
}

struct CircularActivityIndicatorDemo_Previews: PreviewProvider {
    struct CircularActivityIndicatorDemo_Harness: View {

        var body: some View {
            CircularActivityIndicatorDemo()
                .frame(300)
        }
    }

    static var previews: some View {
        CircularActivityIndicatorDemo_Harness()
            .previewDevice(.iPhone_12_Pro_Max)
    }
}