Laden

0.1.0

SwiftUI loading indicator view
vinhnx/Laden

What's New

First release

2020-12-18T03:52:49Z

Laden

SwiftUI loading indicator view


Installation

This component is built using Swift Package Manager, it is pretty straight forward to use:

  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.
  3. For Rules, select Branch (with branch set to main).
  4. Click Finish to resolve package into your Xcode target.

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()
}

ZStack

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

    private var loadingView = SwiftUILoading.CircleOutlineLoadingView()

    var body: some View {
        VStack {
            if shouldLoadingView {
                loadingView
                    .hidden()
            } else {
                loadingView
            }

            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 }
}

Acknowledgement

idea 💡


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

Description

  • Swift Tools 5.3.0
View More Packages from this Author

Dependencies

  • None
Last updated: Mon Oct 18 2021 16:57:49 GMT-0500 (GMT-05:00)