Skip to content

Instantly share code, notes, and snippets.

@douglastaquary
Forked from ArchieGoodwin/SkeletonView
Created August 14, 2023 15:29
Show Gist options
  • Save douglastaquary/63cbfd80f923acb82fe6cc0cfeec8ddb to your computer and use it in GitHub Desktop.
Save douglastaquary/63cbfd80f923acb82fe6cc0cfeec8ddb to your computer and use it in GitHub Desktop.
Basic skeleton view for usage in SwiftUI app.
public struct SkeletonGradientAnimationView: View {
@State var offset: CGFloat = 0
public var body: some View {
ZStack {
GeometryReader { reader in
let largestSide = reader.size.width > reader.size.height ? reader.size.width : reader.size.height
LinearGradient(
stops: [
Gradient.Stop(color: .white.opacity(0), location: 0.333),
Gradient.Stop(color: .white, location: 0.5),
Gradient.Stop(color: .white.opacity(0), location: 0.666),
],
startPoint: UnitPoint(x: 0, y: 0),
endPoint: UnitPoint(x: 1, y: 1)
)
.frame(width: largestSide * 2.0, height: largestSide * 2, alignment: .leading)
.mask(
LinearGradient(colors: [.clear, .white, .white, .clear], startPoint: .leading, endPoint: .trailing)
)
.blendMode(.overlay)
.offset(x: -largestSide * 2 + offset, y: reader.size.height * 0.5 - largestSide)
.onAppear {
withAnimation(.linear(duration: 2.0).repeatForever(autoreverses: false)) {
offset = largestSide * 3
}
}
}
}
}
}
//Usage
struct SkeletonView: View {
var body: some View {
SkeletonGradientAnimationView()
.background(Color.backgroundColor)
.mask(
RoundedRectangle(cornerRadius: 12)
)
}
}
struct CircleSkeletonView: View {
var body: some View {
SkeletonGradientAnimationView()
.background(Color.backgroundColor)
.mask(
Circle()
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment