progress-view.md

ProgressView

Example 1

try? it out

import SwiftUI

struct LoadingView: View {
    var text = "Loading"

    var body: some View {
        Rectangle()
            .frame(width: 120, height: 120)
            .cornerRadius(12)
            .foregroundColor(.backgroundColor)
            .overlay {
                ProgressView() {
                    Text(text)
                        .font(.footnote)
                        .multilineTextAlignment(.center)
                        .foregroundColor(.contentColor)
                        .padding(.horizontal, 10)
                        .lineSpacing(8)
                        .kerning(0.4)
                }
                .progressViewStyle(
                    CircularProgressViewStyle(
                        tint: .contentColor
                    )
                )
            }
    }
}

struct ContentView: View {
    var body: some View {
        LoadingView(text: "Booking Flight ✈️")
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension Color {
    static var contentColor = Color.white
    static var backgroundColor = Color.orange
}

---

Example 2

try? it out

import SwiftUI

struct Loader: View {
    var body: some View {
        Circle()
            .frame(width: 40)
            .foregroundColor(.contentColor)
            .overlay {
                ProgressView()
                    .progressViewStyle(
                        CircularProgressViewStyle(
                            tint: .backgroundColor
                        )
                    )
            }
    }
}

struct CustomButton: View {
    let title: String

    var body: some View {
        Button(action: {}) {
            Text(title)
                .foregroundColor(.black)
                .padding()
        }
        .overlay{
            RoundedRectangle(cornerRadius: 12)
                .stroke(.black, lineWidth: 1)
        }
    }
}

struct ButtonList: View {
    var body: some View {
        VStack {
            CustomButton(title: "Button 1")
            CustomButton(title: "Button 2")
        }
    }
}

struct ContentView: View {
    let timer = Timer.publish(
        every: 8,
        on: .main,
        in: .common
    ).autoconnect()

    @State private var counter = 0

    var body: some View {
        VStack(alignment: .center, spacing: 20) {
            Text("Some View")
            if counter == 0 {
                Loader()
            }
            ButtonList()
                .disabled(counter == 0)
                .opacity(counter == 0 ? 0.25 : 1)
            Text("Some Other View")
        }
        .onReceive(timer) { time in
            if counter == 1 {
                timer.upstream.connect().cancel()
            }
            counter += 1
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

extension Color {
    static var contentColor = Color.black
    static var backgroundColor = Color.white
}

---

Example 3

try? it out

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack(alignment: .center, spacing: 10) {
            ProgressView()
                .progressViewStyle(CircularProgressViewStyle(tint: .red))
                // .controlSize(.large)
                .scaleEffect(1.2)
            Text("Loading...")
        }
        .padding()
        .overlay {
            RoundedRectangle(cornerRadius: 10)
                .stroke(.gray, lineWidth: 1)
        }
        .shadow(radius: 4)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}