#animation

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.

See Also

• Loader.css

• DGActivityIndicatorView

• NVActivityIndicatorView

• Animating Views and Transitions

• Advanced SwiftUI Animations