【Xcode/SwiftUI】シンプルなローディングUIを作る

実装

FancyLoadingView.swift

import SwiftUI

struct FancyLoadingView: View {
    @State private var isAnimating = false

    var body: some View {
        ZStack {
            Color(.systemBackground) // Change the background color to your preference

            Circle()
                .trim(from: 0, to: 0.7) // Customize the loading progress as needed
                .stroke(Color.blue, lineWidth: 5)
                .frame(width: 80, height: 80)
                .rotationEffect(Angle(degrees: isAnimating ? 360 : 0))
                .animation(Animation.linear(duration: 1.5).repeatForever(autoreverses: false))
        }
        .onAppear {
            isAnimating = true
        }
        .onDisappear {
            isAnimating = false
        }
    }
}

HomeView.swift (メインのView)

import SwiftUI

struct HomeView: View {
    var isContentLoading: Bool {
        return true
    }

    var body: some View {
        ZStack {
            FancyLoadingView()
                .opacity(isContentLoading ? 1 : 0)
        }
    }
}

この記事は役に立ちましたか?

はい
いいえ
貴重なフィードバックありがとうございます!