circle graph


beautiful circle graph to present some data or loading process. it can be animated and modified further of course.

you can use is either to represent a process of completion of a certain task, or just to give your page a bit more zing! you can never have enough zing!

/* For easy of copy/pastability, all code is in one bug chunk.
Be a dear and refactor this out any way you see fit 🀘 */

/* Idealy, you would NOT be using pre-defined constants or first view at all, only the code below the refactor line.
I am leaving the initial view here just for easier usage example or possible extraction. Hope that works πŸ‘Œ */

import SwiftUI

fileprivate let baseSize: CGFloat = 300
fileprivate let lineWidth: CGFloat = 40
fileprivate let shadowRadius: CGFloat = 20
fileprivate let imageFontSize: CGFloat = 50
fileprivate let textFontSize: CGFloat = 80
fileprivate let completionStart: CGFloat = 0
fileprivate let completionEnd: CGFloat = 0.7

fileprivate let lightShadowColor = Color(.displayP3, red: 0.95, green: 0.95, blue: 1, opacity: 1.0)
fileprivate let darkShadowColor = Color(.displayP3, red: 0.3137, green: 0.1294, blue: 0.6980, opacity: 1.0)
fileprivate let baseAccentColor = Color(.displayP3, red: 0.39, green: 0.1, blue: 0.9, opacity: 1.0)
fileprivate let shadowColor = Color(.displayP3, red: 0.9, green: 0.9, blue: 1, opacity: 1.0)
//------------------- REFACTOR ABOVE THIS LINE ---------------------------------------

struct CircleGraph: View {

Please please don't use the colors this way πŸ˜… I am only adding it here so you can have a preview
for both light and dark views. You should create a new semantic color in the assets and use it that way πŸ‘Œ
@Environment(\.colorScheme) var colorScheme

var body: some View {

let shadowColor = colorScheme == .dark ? darkShadowColor : lightShadowColor

ZStack {
ZStack {
.frame(width: baseSize, height: baseSize)
.shadow(color: shadowColor, radius: shadowRadius)
VStack {
Image(systemName: "")
.font(Font.system(size: imageFontSize, weight: .black, design: .rounded))
.font(Font.system(size: textFontSize, weight: .heavy, design: .rounded))
.trim(from: completionStart, to: completionEnd)
style: StrokeStyle(lineWidth: lineWidth, lineCap: CGLineCap.round))
.frame(width: baseSize + lineWidth, height: baseSize + lineWidth)
.shadow(color: shadowColor, radius: shadowRadius)


Awesome Sauce!
Thank you for getting one of my views, hope you are happy with it πŸ‘Œ
Consider helping this train rollin πŸš‚ on my Patreon ->

If you have any suggestions for improvements,
feel free to reach me at