SkeletonUI

SkeletonUI aims to bring an elegant, declarative syntax to skeleton loading animations. Get rid of loading screens or spinners and start using skeletons to represent final content shapes.

header

Requirements

  • macOS 10.15.
  • Xcode 11.0.
  • Swift 5.0.

Supported Platforms

  • iOS 13.0.
  • tvOS 13.0.
  • watchOS 6.0.
  • macOS 10.15.

Installation

Swift Package Manager

Swift Package Manager is a tool for automating the distribution of Swift code and is integrated into the swift compiler. Once you have your Swift package set up, adding SkeletonUI as a dependency is as easy as adding it to the dependencies value of your Package.swift.

  dependencies: [
  .package(url: "https://github.com/CSolanaM/SkeletonUI.git", .branch("master"))
  ]

CocoaPods

CocoaPods is a centralized dependency manager for Cocoa projects. For usage and installation instructions, visit their website. To integrate SkeletonUI into your Xcode project using CocoaPods, specify it in your Podfile:

pod 'SkeletonUI'

Features

  • [x] SwiftUI simple, declarative syntax.
  • [x] Super easy and simple to set up.
  • [x] All Views are skeletonables.
  • [x] Fully customizable.
  • [x] Universal (iPhone, iPad, iPod, Apple TV, Apple Watch, Mac).
  • [x] SwiftUI ViewModifier power.
  • [x] Lightweight codebase.

Usage

Basic one-liner:

import SkeletonUI
import SwiftUI

struct UsersView: View {
    @State var users = [String]()

    var body: some View {
        Text("Finished requesting \(users.count) users!")
            .skeleton(with: users.isEmpty)
            .onAppear {
                DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                    self.users = ["John Doe", "Jane Doe", "James Doe", "Judy Doe"]
                }
        }
    }
}

Advanced customization:

import SkeletonUI
import SwiftUI

struct User: Identifiable {
    let id = UUID()
    let name: String
}

struct UsersView: View {
    @State var users = [User]()

    var body: some View {
        SkeletonList(with: users, quantity: 6) { loading, user in
            Text(user?.name)
                .skeleton(with: loading)
                .shape(type: .rectangle)
                .appearance(type: .solid(color: .red, background: .blue))
                .multiline(lines: 3, scales: [1: 0.5])
                .animation(type: .pulse())
        }
        .onAppear {
            DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
                self.users = [User(name: "John Doe"),
                              User(name: "Jane Doe"),
                              User(name: "James Doe"),
                              User(name: "Judy Doe")]
            }
        }
    }
}

GitHub