🌟 Features

• Easy to use
• All UIViews are skeletonables
• Fully customizable
• Universal (iPhone & iPad)
• Interface Builder friendly
• Simple Swift syntax
• Lightweight readable codebase

📋 Supported OS & SDK Versions

• iOS 9.0+
• Swift 4

🎤 Introduction

Today almost all apps have async process, as API requests, long process, etc. And while the process is working, normally developers put a loading to show users that something is happening.

For this reason born SkeletonView, an elegant way to show users that something is happening and also prepare users to which contents he is waiting.

This library try to be a very easy library, and isolated from your code.

Project generated with SwiftPlate

🔮 Example

To run the example project, clone the repo, and run SkeletonViewExample target.

📲 Installation

Using CocoaPods

Edit your Podfile and specify the dependency:

pod "SkeletonView"

Using Carthage

Edit your Cartfile and specify the dependency:

github "Juanpe/SkeletonView"

🐒 How to use

You only need 3 steps to use SkeletonView:

1. Import SkeletonView in proper place.

import SkeletonView

2. Now, set what views will be skeletonables. You can do this by two ways:

Using code:

avatarImageView.isSkeletonable = true

Using IB/Storyboards:

3. Then, when you set the views, you can show the skeleton. To do it, you have 4 choices:

(1) view.showSkeleton()                 // Solid
(2) view.showGradientSkeleton()         // Gradient
(3) view.showAnimatedSkeleton()         // Solid animated
(4) view.showAnimatedGradientSkeleton() // Gradient animated

Preview

Solid	Gradient	Solid Animated	Gradient Animated

IMPORTANT!

SkeletonView is recursive, so if you want show the skeleton in all skeletonable views, you only need execute the show method in the main container view. For example, with UIViewControllers

🌿 Collections

Now, SkeletonView only is compatible with UITableView. We are working hard to support UICollectionView too 💪🏼

If you want to show the skeleton in a UITableView, you need to conform SkeletonTableViewDataSource protocol.

public protocol SkeletonTableViewDataSource: UITableViewDataSource {
    func numSections(in collectionSkeletonView: UITableView) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
    func collectionSkeletonView(_ skeletonView: UITableView, cellIdenfierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier
}

You can see, this protocol inherit from ```UITableViewDataSource``, so you can replace this protocol for the skeleton protocol.

This protocol has a default implementation:

func numSections(in collectionSkeletonView: UITableView) -> Int
// Default: 1

func collectionSkeletonView(_ skeletonView: UITableView, numberOfRowsInSection section: Int) -> Int
// Default:
// It calculates how many cells need to populate whole tableview

So you only need to specify the cell identifier for cells. This method doesn't have default implementation

func collectionSkeletonView(_ skeletonView: UITableView, cellIdenfierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier

Example

func collectionSkeletonView(_ skeletonView: UITableView, cellIdenfierForRowAt indexPath: IndexPath) -> ReusableCellIdentifier {
   return "CellIdentifier"
}

📰 Multiline text

When you use elements with texts. SkeletonView draws lines to simulate text. Also, you can decide how many lines you want. If you set numberOfLines to zero, then it will calculate how many lines you need to populate whole skeleton and it will be included. Instead, if you set to one, two or another number greater than zero, only it will included this number of lines.

🎨 Custom colors

You can decide what color is tinted the skeleton. You only need to pass as parameter what color or gradient you want.

Using solid colors

view.showSkeleton(usingColor: UIColor.midnightBlue) // Solid

Using gradients

let gradient = SkeletonGradient(baseColor: UIColor.midnightBlue)
view.showGradientSkeleton(usingGradient: gradient) // Gradient

SkeletonView features 20 flat colors 🤙🏼:

Image captured from website https://flatuicolors.com

🤓 Custom animations

Now, SkeletonView has built-in two animations, pulse for solid skeletons and sliding for gradients. It's by default.

But, if you want to do your own skeleton animation, it's very simple. You need indicate as parameters a SkeletonLayerAnimation

public typealias SkeletonLayerAnimation = (CALayer) -> CAAnimation

Then, you can execute the next code to show the skeleton:

view.showAnimatedSkeleton { (layer) -> CAAnimation in
  // Insert here your animation
}

👨‍👧‍👦 Hierarchy

SkeletonView is recursive, so to improve the performance, we need to stop recursive method as soon as possible. For this reason, you must set Skeletonable the container view, because if the container doesn't is Skeletonable break the loop.

Better with some examples:

ìsSkeletonable= ☠️

Configuration	Result

📚 Documentation

Coming soon...😅

❤️ Contributed

This is an open source project, so feel free to contribute. How?

• Open an issue.
• Send feedback via email.
• Propose your own fixes, suggestions and open a pull request with the changes.

See all contributors

👨🏻‍💻 Author

• Juanpe Catalán

👮🏻 License

MIT License

Copyright (c) 2017 swift-code

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.