Activity Indicator in SwiftUI
There are a lot of elegant solutions for typical tasks in web development. One of such solutions is a Loader.css — library of animated activity indicators. It is actively ported to different languages and platforms. The following libraries are available for iOS:
DGActivityIndicatorView (Objective-C);
NVActivityIndicatorView (Swift).
I wanted to implement one of the styles (number 29 in the NVActivityIndicatorView list) on SwiftUI:
struct ActivityIndicator: View {
@State private var isAnimating: Bool = false
var body: some View {
GeometryReader { (geometry: GeometryProxy) in
ForEach(0..<5) { index in
Group {
Circle()
.frame(width: geometry.size.width / 5, height: geometry.size.height / 5)
.scaleEffect(!self.isAnimating ? 1 - CGFloat(index) / 5 : 0.2 + CGFloat(index) / 5)
.offset(y: geometry.size.width / 10 - geometry.size.height / 2)
}.frame(width: geometry.size.width, height: geometry.size.height)
.rotationEffect(!self.isAnimating ? .degrees(0) : .degrees(360))
.animation(Animation
.timingCurve(0.5, 0.15 + Double(index) / 5, 0.25, 1, duration: 1.5)
.repeatForever(autoreverses: false))
}
}.aspectRatio(1, contentMode: .fit)
.onAppear {
self.isAnimating = true
}
}
}
You can use this component as follows:
let kPreviewBackground = Color(red: 237/255.0, green: 85/255.0, blue: 101/255.0)
struct ContentView: View {
var body: some View {
ZStack {
kPreviewBackground
.edgesIgnoringSafeArea(.all)
VStack {
ActivityIndicator()
.frame(width: 50, height: 50)
}.foregroundColor(Color.white)
}
}
}
This example can be used as a starting point for creating a universal activity indicator with support for different display styles.
Source Code
Source Code available on GitHub Gists.
