Alexey Belousov

TILOctober 18, 2019by Alexey Belousov

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.

See Also

TILJuly 22, 2019by Alexey Belousov

Networking and thermal conditions debugging in Xcode 11

Xcode 11 introduces tool for networking and thermal conditions debugging. This feature requires device running iOS 13. Previously network conditioning feature was available within Additional Tools for Xcode.

See also