💀 An easy way to create sliding CAGradientLayer animations! Works great for creating skeleton screens for loading content.

Related tags

Activity Indicator swift ios skeleton loader gradients loading-animations skeleton-screen slide-animation
Overview

Skeleton

Skeleton is an easy way to create sliding CAGradientLayer animations! It works great for creating skeleton screens:

👩‍💻 Usage

The entire library comes down to just one public-facing extension:

public extension CAGradientLayer {
  public func slide(to dir: Direction, group: ((CAAnimationGroup) -> Void) = { _ in })
  public func stopSliding()
}

You can check out the example and the documentation for more.

📚 Example

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

🛠 Installation

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

pod "Skeleton"

Skeleton is also available through Carthage. Add this to your Cartfile:

github "gonzalonunez/Skeleton" ~> 0.4.0

📄 License

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

Comments
  • Animation stops working

    Animation stops working

    When I put app to the background and then I return to it, animation with gradient stops working. This happens on example project as well.

    -my mistake sorry-

    opened by fralways 4
  • IB: Failed to render and update auto layout status.

    IB: Failed to render and update auto layout status.

    Hello. First of all I would like to thank you for this library. I am trying to use this library to build my skeleton loading views, but when I insert a single GradientContainerView, IB breaks,and nothing renders, resulting in all of my VCs being blank in the IB.

    The error I get in the build log is the following:

    file:///.../LoadingView.xib: error: IB Designables: Failed to render and update auto layout status for UIView (iN0-l3-epB): dlopen(Skeleton.framework, 1): no suitable image found.  Did find:
	Skeleton.framework: required code signature missing for 'Skeleton.framework'

    I suppose, as the message says, that if I fix the signature problem then my views will render and there will not be any problems. Is this something I need to solve on my side, or there is a signing problem in the library itself? (Keep in mind that the project builds just fine, it's just that InterfaceBuilder is broken)

    Thank you!

    opened by lpbas 3
  • Add delay between transitions

    Add delay between transitions

    First of all thanks for this great project!

    Is it possible to add an delay between the transition. For now it seems to be an endless animation and I would like to add a small delay between each gradient.

    opened by MaciDE 3
  • Cannot create circular GradientContainerView

    Cannot create circular GradientContainerView

    Issue Library does not support circular shimmer views

    Steps to Reproduce In the example project within SkeletonCell.swift, update the imagePlaceholderView to be a GradientContainerView and update SkeletonCell.xib with the changes. Run the example project to now see a square for the imagePlaceholderView with a shimmer. It seems the imagePlaceholderView.layer.cornerRadius is ignored if imagePlaceholderView is a GradientContainerView.

    Image screen shot 2017-05-21 at 9 56 39 am

    opened by sp71 3
  • How can I make the animation like this using Skeleton?

    How can I make the animation like this using Skeleton?

    I tried to make the animation like this: https://gph.is/g/amWgbvj (This one created by using library: https://github.com/dvtng/react-loading-skeleton in WebApp). I tried to chain animation from left to right, but I cant make the same length of gradient shape for all subview. Here is my code:

    extension ShimmerExampleCell: SkeletonOwner {
    var gradientLayers: [CAGradientLayer] {
        return [imagePlaceholderView.gradientLayer, titlePlaceholderView.gradientLayer, subtitlePlaceholderView.gradientLayer]
    }
    func slide(to dir: SkeletonDirection, group: ((CAAnimationGroup) -> Void) = { _ in }) {
        imagePlaceholderView.gradientLayer.slide(to: .right) { (animationGroup) in
            animationGroup.beginTime = 0
        }
        
        titlePlaceholderView.gradientLayer.slide(to: .right) { (animationGroup) in
            animationGroup.beginTime = 1.1
            subtitlePlaceholderView.gradientLayer.add(animationGroup, forKey:  CAGradientLayer.kSlidingAnimationKey)
        }
    }
}

    And I got: https://gph.is/g/ZPgPlXV

    Please help me. Thank you so much!

    opened by huuchi207 1
Releases(0.5.1)
Owner
Gonzalo Nuñez
Gonzalo Nuñez
GitHub
Awesome loading animations using 3D engine written with Swift

RSLoadingView Introduction RSLoadingView bring your app to the new age of loading animations using 3D engine. Written with Swift Customizable Using Ap

null 419 Dec 16, 2022
Windless makes it easy to implement invisible layout loading view.

Windless Windless makes it easy to implement invisible layout loading view. Contents Requirements Installation Usage Looks Credits Communication Licen

ArLupin 940 Dec 22, 2022
A number of preset loading indicators created with SwiftUI

A number of preset loading indicators created with SwiftUI

Exyte 968 Jan 8, 2023
A metaball loading written in Swift.

DBMetaballLoading Synopsis A metaball loading written in Swift. Special thanks to dodola's MetaballLoading, which is an android project. The animation

ChildhoodAndy 72 Jul 2, 2022
⌛️A customizable animated gradient loading bar.

GradientLoadingBar A customizable animated gradient loading bar. Inspired by iOS 7 Progress Bar from Codepen. Example To run the example project, clon

Felix M. 791 Dec 26, 2022
A lightweight and awesome loading Activity Indicator for your iOS app.

BPCircleActivityIndicator BPCircleActivityIndicator is a clean and easy-to-use Activity Indicator meant to display the progress of an ongoing task on

Ben.Park 46 Aug 12, 2022
A simple and awesome loading Activity Indicator(with block moving animation) for your iOS app.

BPBlockActivityIndicator BPBlockActivityIndicator is a clean and easy-to-use Activity Indicator meant to display the progress of an ongoing task on iO

Ben.Park 43 Nov 6, 2021
Show pleasant loading view for your users 😍

RHPlaceholder ?? Because traditional loading view like UIActivityIndicatorView or similar one are no longer so trendy (Facebook or Instagram apps are

Robert Herdzik 238 Nov 2, 2022
The easiest way to handle a simple full screen activity indicator in iOS. Written in Swift.

LLSpinner An easy way to handle full screen activity indicator. Easy to use Get Started // Show spinner LLSpinner.spin() // Hide spinner LLSpinner.st

Aleph Retamal 36 Dec 9, 2021
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Features • Guides • Installation • Usage • Miscellaneous • Contributing ?? README is available in other languages: ???? . ???? . ???? . ???? . ???? To

Juanpe Catalán 11.7k Jan 8, 2023
A view class for iOS that makes uploading easy and beautiful.

SVUploader A view class for iOS that makes uploading easy and beautiful. Demo SVUploader is fully customizable - check out 2 demos. Installation Just

Kiran 79 Apr 18, 2022
☠️SkeletonUI aims to bring an elegant, declarative syntax to skeleton loading animations.

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.

Carlos Solana Martínez 551 Dec 18, 2022
SwiftUI Animation Library. Useful SwiftUI animations including Loading/progress, Looping, On-off, Enter, Exit, Fade, Spin and Background animations that you can directly implement in your next iOS application or project. The library also contains huge examples of spring animations such as Inertial Bounce, Shake, Twirl, Jelly, Jiggle, Rubber Band, Kitchen Sink and Wobble effects. Browse, find and download the animation that fits your needs.

swiftui-animations SwiftUI Animations Library. Useful SwiftUI animations for your next project. YouTube Tutorials: https://www.youtube.com/nimbbble An

Amos Gyamfi 2.4k Jan 6, 2023
Wave is a spring-based animation engine for iOS that makes it easy to create fluid, interruptible animations that feel great.

Wave is a spring-based animation engine for iOS and iPadOS. It makes it easy to create fluid, interactive, and interruptible animations that feel great.

Janum Trivedi 1.2k Jan 8, 2023
A SwiftUI view for dynamically rendering content based upon "loading", "error", and "completed" data loading states.

SwiftUIAsyncContentView A SwiftUI view for dynamically rendering content based upon "loading", "error", and "completed" data loading states.. Installa

CypherPoet 0 Dec 26, 2021
Onboarding - Completed project for creating Onboarding screens in SwiftUI

Onboarding Completed project for creating Onboarding screens in SwiftUI.

Khawlah Bawazir 0 Jan 13, 2022
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
(Animate CSS) animations for iOS. An easy to use library of iOS animations. As easy to use as an easy thing.

wobbly See Wobbly in action (examples) Add a drop of honey ?? to your project wobbly has a bunch of cool, fun, and easy to use iOS animations for you

Sagaya Abdulhafeez 150 Dec 23, 2021
iPhone and iPod Touch version of Skeleton Key: is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. Made with cocos2d-iphone.

Skeleton Key (iOS) Skeleton Key is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. It's availa

null 117 Jun 6, 2022
A Swift library to take the power of UIView.animateWithDuration(_:, animations:...) to a whole new level - layers, springs, chain-able animations and mixing view and layer animations together!

ver 2.0 NB! Breaking changes in 2.0 - due to a lot of requests EasyAnimation does NOT automatically install itself when imported. You need to enable i

Marin Todorov 3k Dec 27, 2022