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!
Top comments (0)