Repository files navigation

ShimmerView is a collection of APIs to construct Skelton View + Shimmering Effect type loading indicator on UIKit and SwiftUI. This framework is inspired by Facebook'sShimmer.

github "mercari/ShimmerView"

pod 'ShimmerView'

In yourPackage.swift, add the following line to thedependencies:

.package(url:"https://github.com/mercari/ShimmerView.git", from: #version#)

The shimmering effect would be effectively displayed when all the subviews’s effect in the screen is synced and animated together.

Not Synced	Synced

ShimmerView calculates its relative coordinate against the sync target and synchronize the shimmering effect with other ShimmerViews.

You can customize the appearance of the shimmer effect by usingShimmerViewStyle.

letstyle=ShimmerViewStyle(    baseColor:UIColor(red:239/255, green:239/255, blue:239/255, alpha:1.0),    highlightColor:UIColor(red:247/255, green:247/255, blue:247/255, alpha:1.0),    duration:1.2,    interval:0.4,    effectSpan:.points(120),    effectAngle:0* CGFloat.pi)

ShimmerView has two related APIs on SwiftUI as below:

• ShimmerScope
• ShimmerElement

You can create a custome loading indicator by combining these APIs and otherSwiftUI APIs.

structPlaceholder:View{@StateprivatevarisAnimating:Bool=truevarbody:someView{ShimmerScope(isAnimating: $isAnimating){HStack(alignment:.top){ShimmerElement(width:100, height:100).cornerRadius(4)VStack(alignment:.leading, spacing:8){ShimmerElement(height:12).cornerRadius(4)ShimmerElement(height:12).cornerRadius(4)ShimmerElement(width:100, height:12).cornerRadius(4)}}.padding(.horizontal,16)}}}

ShimmerScope is a container view to sync the animation timing and style of all theShimmerElements in its content.

Please note thatShimmerScope usesGeometryReader in its body function and it doesn't fit to the content but expands to the parent view bounds.

ShimmerElement is a view to show the shimmering effect animation.

ShimmerElement looks forEnvironmentObject injected byShimmerScope so please make sure to use it as a sub view ofShimmerScope'scontent function.

ShimmerView has four related APIs on UIKit as blow:

• ShimmerView
• ShimmerSyncTarget
• ShimmerReplicatorView
• ShimmerReplicatorViewCell

ShimmerView is a subclass ofUIView that hasCAGradientLayer as a sublayer and encapsulates the logic for the shimmering effect animation.

letshimmerView=ShimmerView()view.addSubview(shimmerView)shimmerView.startAnimating()

The style ofShimmerView can be customized withShimmerViewStyle.

letstyle=ShimmerViewStyle.defaultshimmerView.apply(style: style)

ShimmerView can be used as it is, but to make the best effect, create a view or view controller that contains multiple ShimmerViews and specify the container asShimmerSyncTarget. ShimmerView will calculate its relative origin against the target and adjust the effect automatically.

ShimmerReplicatorView will let you create a list type loading screen with a few lines of code. It replicates theShimmerReplicatorViewCell provided by thecellProvider closure to fill the bounds of the view.

letreplicatorView=ShimmerReplicatorView(    itemSize:.fixedSize(CGSize(width:80, height:80)),    interitemSpacing:16,    lineSpacing:0,    horizontalEdgeMode:.within,    cellProvider:{()->ShimmerReplicatorViewCellinletcell=ShimmerView()        cell.layer.cornerRadius=8.0        cell.layer.masksToBounds=truereturn cell})replicatorView.startAnimating()

Please read the CLA carefully before submitting your contribution to Mercari.Under any circumstances, by submitting your contribution, you are deemed to accept and agree to be bound by the terms and conditions of the CLA.

https://www.mercari.com/cla/

Copyright 2020 Mercari, Inc.

Licensed under the MIT License.