Skip to content

CSolanaM/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.

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 ✨

  • SwiftUI simple, declarative syntax.
  • Super easy and simple to set up.
  • All Views are skeletonables.
  • Fully customizable.
  • Universal (iPhone, iPad, iPod, Apple TV, Apple Watch, Mac).
  • SwiftUI ViewModifier power.
  • 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, 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 📆

See CHANGELOG.md for details.

Contributing 🎉

  • 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 💬

See CODE_OF_CONDUCT.md for details.

Credits 🙊

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 🎓

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