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's Shimmer.
github "mercari/ShimmerView"
pod 'ShimmerView'
In your Package.swift, add the following line to the dependencies:
.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 using ShimmerViewStyle.
let style = 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:
ShimmerScopeShimmerElement
You can create a custome loading indicator by combining these APIs and other SwiftUI APIs.
struct Placeholder: View {
@State
private var isAnimating: Bool = true
var body: some View {
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 the ShimmerElements in its content.
Please note that ShimmerScope uses GeometryReader 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 for EnvironmentObject injected by ShimmerScope so please make sure to use it as a sub view of ShimmerScope's content function.
ShimmerView has four related APIs on UIKit as blow:
ShimmerViewShimmerSyncTargetShimmerReplicatorViewShimmerReplicatorViewCell
ShimmerView is a subclass of UIView that has CAGradientLayer as a sublayer and encapsulates the logic for the shimmering effect animation.
let shimmerView = ShimmerView()
view.addSubview(shimmerView)
shimmerView.startAnimating()The style of ShimmerView can be customized with ShimmerViewStyle.
let style = ShimmerViewStyle.default
shimmerView.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 as ShimmerSyncTarget. 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 the ShimmerReplicatorViewCell provided by the cellProvider closure to fill the bounds of the view.
let replicatorView = ShimmerReplicatorView(
itemSize: .fixedSize(CGSize(width: 80, height: 80)),
interitemSpacing: 16,
lineSpacing: 0,
horizontalEdgeMode: .within,
cellProvider: { () -> ShimmerReplicatorViewCell in
let cell = ShimmerView()
cell.layer.cornerRadius = 8.0
cell.layer.masksToBounds = true
return 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.
Copyright 2020 Mercari, Inc.
Licensed under the MIT License.