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:

1. In Xcode (11+), open your project and navigate to File > Swift Packages > Add Package Dependency...
2. 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.

(add yours here)

---

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! :)