Custom SwiftUI Activity Indicator for macOS apps

April 21, 20242 min read#swift, #macos, #quickdrop

For my Quick Drop app, I need an acitivty indicator for long running shell script integrations such as compressing videos.

My first solution would be using the native ProgressView. It is easy to use and work great as well. But unfortunately, for some reasons, the tint color of ProgressView is not customisable on macOS Sonoma. This affect the ability for me to customise the ProgressView to support dark/light appearances for my app.

A quick check in internet shows that others also have the same issue. It works well on iOS though with the following code: ProgressView().progressViewStyle(CircularProgressViewStyle(tint: .red)).

After 3 hours fighting with the bug and searching all corners of the internet to find a solution to fix the ProgressView, I have no choice but to create a custom activity indicator for my app, where I have full control over the color of the indicator, so that I can customise it however I can.

With a little bit help from ChatGPT, this is my simple activity indicator that I’m using in the Quick Drop app

struct ActivityIndicator: View {
    @State private var animate = false

    private let style = StrokeStyle(lineWidth: 3, lineCap: .round)
    private let color1 = Color.white
    private let color2 = Color.white.opacity(0.5)

    var body: some View {
        ZStack {
            Circle()
                .trim(from: 0, to: 0.7)
                .stroke(
                    AngularGradient(gradient: .init(colors: [color1, color2]), center: .center),
                    style: style
                )
                .rotationEffect(Angle(degrees: animate ? 360 : 0))
                .animation(
                    Animation.linear(duration: 0.7).repeatForever(autoreverses: false)
                )
        }
        .onAppear {
            self.animate.toggle()
        }
    }
}

The result of it would be like the following gif:

demo

I’m pretty happy with the quick and simple solution. The component is working with a basic functionality, and can be easily extended with more customisations.

If you have any idea how to fix the ProgressView to have a different tint color on macOS, please let me know. I’m happy to see what your custom SwiftUI activity indicators as well if you have creatd something similar.

Quick Drop logo

Profile picture

Personal blog by An Tran. I'm focusing on creating useful apps.
#Swift #Kotlin #Mobile #MachineLearning #Minimalist


© An Tran - 2024