Awesome
<h1 align="center">Laden</h1> <p align="center">SwiftUI loading indicator view</p> <p align="center"><img src="./Resources/loading.gif"/></p>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! :)