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


Alexey
Belousov

Head of Mobile Development at JetRockets

Explore more of JetRockets