Spinners in iOS 18 - #30DaysOfSwift

Day 29: Spinners – Loading Elements in SwiftUI

Let's learn to add loading spinners to your SwiftUI applications.

Spinners provide users with visual feedback while waiting for data to load, enhancing the overall user experience.

Step 1: Using SwiftUI's Built-in ActivityIndicator

SwiftUI provides a built-in ProgressView that you can use as a spinner. Here’s how to implement it in your app.

Basic Spinner Example

import SwiftUI

struct SpinnerExampleView: View {
    @State private var isLoading = false

    var body: some View {
        VStack {
            if isLoading {
                ProgressView("Loading...")
                    .progressViewStyle(CircularProgressViewStyle(tint: .blue)) // Customize color
                    .scaleEffect(1.5) // Adjust size
                    .padding()
            } else {
                Button("Load Data") {
                    loadData()
                }
                .padding()
            }
        }
        .navigationTitle("Spinner Example")
    }

    private func loadData() {
        isLoading = true

        // Simulating a network call
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            isLoading = false // Stop loading after 2 seconds
        }
    }
}

Comments for Customization:

ProgressView("Loading..."): The spinner label that shows while loading. You can customize this text.
.progressViewStyle(CircularProgressViewStyle(tint: .blue)): Sets the color of the spinner.
.scaleEffect(1.5): Adjusts the size of the spinner for better visibility.

How are you going to implement Spinners? Let me know.

Happy coding!