Laden
Laden copied to clipboard
SwiftUI loading indicator view
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! :)