SkeletonView

🚀 Features

• Easy to use
• All UIViews are skeletonables
• Fully customizable
• Interface Builder friendly
• Simple Swift syntax
• Lightweight readable codebase

📋 Supported OS & SDK Versions

• iOS 9.0+
• Swift 4

🔮 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, you only need 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 decide and set the views, only need show the skeleton. For this, 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 show method in the main container view. For example, with UIViewControllers

Collections

SkeletonUITableViewDataSource

The Selectable protocol dictates whether an item is available (isSelectable), as observed by the size of the Overlay's dot.

public protocol Selectable {
    var isSelectable: Bool { get set }
}

📰 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 🤙🏼:

🤓 Custom animations

👨‍👧‍👦 Hierarchy

📚 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.