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.

Requirements :gear:

macOS 10.15.
Xcode 11.0.
Swift 5.0.

Supported Platforms :iphone:

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

Installation :computer:

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 :sparkles:

[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 :rocket:

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,
                          animation: .pulse(),
                          appearance: .solid(color: .red, background: .blue),
                          shape: .rectangle,
                          lines: 3,
                          scales: [1: 0.5])
        }
        .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")]
            }
        }
    }
}

Change Log :calendar:

See CHANGELOG.md for details.

Contributing :tada:

Suggest your idea as a feature request for this project.
Create a bug report to help us improve.
Propose your own fixes, suggestions and open a pull request with the changes.

See CONTRIBUTING.md for details.

Code of Conduct :speech_balloon:

See CODE_OF_CONDUCT.md for details.

Credits :speak_no_evil:

SkeletonUI is owned and maintained by CSolanaM. You can follow me on Twitter at @CSolanaM or contact me via email for project updates and releases.

License :mortar_board:

SkeletonUI is released under the MIT license. See LICENSE for details.

CSolanaM / SkeletonUI

readme