Skip to content

Instantly share code, notes, and snippets.

@satishVekariya
Created August 16, 2024 18:40
Show Gist options
  • Save satishVekariya/b2b92511d31204389621817b9b9d660d to your computer and use it in GitHub Desktop.
Save satishVekariya/b2b92511d31204389621817b9b9d660d to your computer and use it in GitHub Desktop.
Unknown progress indicator view
struct UnknownProgressIndicator: View {
var size: CGFloat = 100
var primaryColor = Color(red: 1.0, green: 0.5, blue: 0.4)
var bgColor = Color(red: 0.155, green: 0.041, blue: 0.3)
var animationCycleTime: CGFloat = 3.5
@State private var rotation: CGFloat = 90
var body: some View {
Circle()
.fill(bgColor)
.frame(width: size, height: size)
.overlay {
Circle()
.fill(primaryColor)
.frame(width: size * 0.62, height: size * 0.62)
.overlay {
Image(systemName: "questionmark")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: size * 0.18, height: size * 0.18)
.fontWeight(.bold)
}
}
.overlay {
Circle()
.trim(from: 0.0, to: 0.5)
.stroke(
AngularGradient(
gradient: Gradient(colors: [bgColor, primaryColor]),
center: .center,
startAngle: .degrees(0),
endAngle: .degrees(180)
),
style: StrokeStyle(lineWidth: size * 0.09, lineCap: .round)
)
.rotationEffect(.degrees(rotation))
.padding(.all, (size * 0.09)/2)
}
.clipShape(Circle())
.onAppear {
withAnimation(.linear(duration: animationCycleTime).repeatForever(autoreverses: false)) {
rotation += 360
}
}
}
}
#Preview {
UnknownProgressIndicator()
}
@satishVekariya
Copy link
Author

UnknownProgressIndicator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment