SwiftUI loading indicator view
This component is built using Swift Package Manager, it is pretty straight forward to use:
- In Xcode (11+), open your project and navigate to
File > Swift Packages > Add Package Dependency... - Paste the repository URL (
https://github.com/vinhnx/Laden) and click Next. - For Rules, select Branch (with branch set to
main). - Click
Finishto resolve package into your Xcode target.
At simplest form:
import SwiftUI
import Laden
struct ContentView: View {
var body: some View {
Laden.CircleLoadingView()
}
}To show loading view on top on current view, you can embed Laden inside a ZStack, and put it below your current view:
ZStack {
Text("Some text") // your content view
Laden.CircleOutlineLoadingView()
}
A view that overlays its children, aligning them in both axes.
To indicate loading state, have a private loading bool @State and bind it to Laden's isAnimating initialzier, default value is true (or animated by default):
import SwiftUI
import Laden
struct ContentView: View {
@State private var isLoading = true
var body: some View {
VStack {
Laden.CircleLoadingView(isAnimating: isLoading)
Button(isLoading ? "Stop loading" : "Start loading") {
self.isLoading.toggle()
}
}
}
}To show or hide loading view, have a private show/hide bool @State and modify said loading with .hidden attribute, when toggled:
import SwiftUI
import Laden
struct ContentView: View {
@State private var shouldLoadingView = true
private var loadingView = SwiftUILoading.CircleOutlineLoadingView()
var body: some View {
VStack {
if shouldLoadingView {
loadingView
.hidden()
} else {
loadingView
}
Button(shouldCircleView ? "Show" : "Hide") {
self.shouldLoadingView.toggle()
}
}
}
}To customize loading view color, use color initializer:
Laden.CircleOutlineLoadingView(color: .red)Available customizations:
/// Loading view protocol that define default configurations.
public protocol LoadingAnimatable: View {
/// Whether this loading view is animating.
var isAnimating: Bool { get }
/// Default color for loading view.
var color: Color { get }
/// The default size for loading view.
var size: CGSize { get set }
/// Default stroke line width for loading bar.
var strokeLineWidth: CGFloat { get }
}idea 💡
- AppCoda's SwiftUI animation: for basic building block.
- ActivityIndicators: for idea how to build and publish a custom SwiftUI control package.
Feel free to open an issue or contact me on Twitter for discussions, news & announcements & other projects. 🚀
I hope you like it! :)