Laden
SwiftUI loading indicator view
Installation
This component is built using Swift Package Manager, it is pretty straight forward to use, no command-line needed:
- 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 to have Xcode resolve package.
3. For Rules, select Versions, and choose Up to Next Major as 0.1.0, or checkout the Releases tab for upcoming releases.
4. Click Finish to integrate package into your Xcode target.
5. Profit!
Usage
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()
}or simply just use .overlay attribute:
Text("Some text") // your content view
.overlay(Laden.BarLoadingView())
ZStack
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
var laden: some View {
Laden.CircleLoadingView(
color: .white, size: CGSize(width: 30, height: 30), strokeLineWidth: 3
)
}
var body: some View {
VStack {
if shouldLoadingView {
laden.hidden()
} else {
laden
}
Button(shouldCircleView ? "Show" : "Hide") {
self.shouldLoadingView.toggle()
}
}
}
}Customization
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 }
}Apps currently using Laden
- Clendar - Clendar - universal calendar app. Written in SwiftUI. Available on App Store. MIT License.
Acknowledgement
idea
- AppCoda's SwiftUI animation: for basic building block.
- ActivityIndicators: for idea how to build and publish a custom SwiftUI control package.
What is Laden, actually?
It's mean "charge", in Norwegian
Help, feedback or suggestions?
Feel free to open an issue or contact me on Twitter for discussions, news & announcements & other projects.
I hope you like it! :)