SwiftUI series 6: Creating an Elegant Loading Animation in SwiftUI

In this tutorial, we'll create a beautiful loading animation using SwiftUI. We'll build a simple app that shows animated dots when processing a request, providing visual feedback to users during wait times.

Project Overview

Our app will consist of:

A main view with a submit button A custom loading animation with bouncing dots State management to control the animation Setting Up the Main View

First, let's create our main view structure. We'll use a ZStack for layering our content and a cyan background color.

struct ContentView: View {
    @State private var isUserWaiting = false

    var body: some View {
        ZStack {
            Color(.cyan).ignoresSafeArea()

            VStack {
                Text("Hello, This is William JM's App")
                    .font(.title)

                Button("Submit") {
                    if isUserWaiting {
                        isUserWaiting = false
                    } else {
                        startSomeThing()
                    }
                }
                .padding()
                .background(Color.white)
                .foregroundStyle(.cyan)
                .cornerRadius(10)

                if isUserWaiting {
                    LoadingView()
                }
            }
        }
    }
}

Creating the Loading Animation

The heart of our app is the LoadingView component. This creates an animated sequence of dots that scale up and down in a wave-like pattern.