Latest 0.1.2
License MIT
Platforms ios 10.0

Swift Version License Platform

image image image



public class NKSkeleton {

  public init(configuration: NKSkeletonConfiguration, sourceView: UIView? = nil) 

    Show skeleton on `sourceView`
  public func show(on sourceView: UIView? = nil) 

    Hide skeleton on `sourceView`
  public func remove() 



public struct NKSkeletonConfiguration {

  /// The parameter indicates the need to play animation
  public var isAnimatable = false

  /// Sequence of colors to display the gradient
  public var colors = [UIColor.white.cgColor, UIColor.lightGray.cgColor]

  /// Gradient display type
  public var type: NKType = .axial

  /// The position of the beginning of the gradient vector
  public var initialPosition: NKInitialPosition = .topLeft

  /// The duration of one pass animation
  public var duration: CFTimeInterval = 0

  /// The level of subviews to be hidden by the skeleton, relative to the parent view
  public var subviewsLevel = 0

  public init()


public extension NKSkeletonConfiguration {

  /// Skeleton gradient type
  public enum NKType: Equatable {

      Using the parameter `.axial` gradient will be formed as a linear transition between the colors along the gradient vector
    case axial

      Using the parameter `.radial(Bool)` gradient will be formed as a radial transition between the colors from the starting point in all directions

      The passed `Bool` parameter is responsible for the direction of the animation.
      If `NKSkeletonConfiguration().isAnimatable = false` passed `Bool` parameter value will be ignored.

      If passed `Bool` parameter is `true` animation will move from `NKSkeletonConfiguration().initialPosition' in all directions, else - from all directions to `NKSkeletonConfiguration().initialPosition'
    case radial(Bool)


  Starting (initial) point of the gradient on the `NKSkeleton().sourceView'

  In case `NKSkeletonConfiguration().type = .axial' gradient vector will be directed from the selected starting point to the opposite side/corner

  In case `NKSkeletonConfiguration().type = .radial(bool)' will be formed as a radial transition between the colors from the starting point in all directions
  public enum NKInitialPosition {

    /// <if `NKSkeletonConfiguration().type = .axial'> from left side to right side
    case left

    /// <if `NKSkeletonConfiguration().type = .axial'> from right side to left side
    case right

    /// <if `NKSkeletonConfiguration().type = .axial'> from top side to bottom side
    case top

    /// <if `NKSkeletonConfiguration().type = .axial'> from bottom side to top side
    case bottom

    /// <if `NKSkeletonConfiguration().type = .axial'> from top left corner to bottom right corner
    case topLeft

    /// <if `NKSkeletonConfiguration().type = .axial'> from top right corner to bottom left corner
    case topRight

    /// <if `NKSkeletonConfiguration().type = .axial'> from bottom left corner to top right corner
    case bottomLeft

    /// <if `NKSkeletonConfiguration().type = .axial'> from bottom right corner to top left corner
    case bottomRight

    /// <if `NKSkeletonConfiguration().type = .axial'> from center to left and right sides
    case center


The following image shows the principle of determining the subview level relative to the main view (self.view) of the view controller.


To run the example project, clone the repo, and run pod install from the Example directory first.



NKSkeleton is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'NKSkeleton'


nkopilovskii, [email protected]


NKSkeleton is available under the MIT license. See the LICENSE file for more info.

Latest podspec

    "name": "NKSkeleton",
    "version": "0.1.2",
    "summary": "Visual component for hiding subviews for the period of loading content",
    "description": "This module allows you to impose a mask on the display for the period of loading content.nAdvanced features allow you to set the level of subview relative to the parent view (to which the module is applied), colors, type and animation of the gradient, with the ability to control the speed of its running.nnThis module provides a simple implementation of a variety of design solutions for visual components with loadable content.",
    "homepage": "",
    "license": {
        "type": "MIT",
        "file": "LICENSE"
    "authors": {
        "nkopilovskii": "[email protected]"
    "source": {
        "git": "",
        "tag": "0.1.2"
    "social_media_url": "",
    "platforms": {
        "ios": "10.0"
    "swift_version": "4.2",
    "source_files": "NKSkeleton/Classes/**/*"

Pin It on Pinterest

Share This