Rectangle progress bar swiftUI

Question

Hey does someone know how can I create rectangle progress bar in swiftUI?

Something like this? https://i.stack.imgur.com/CMwB3.gif

I have tried this:

struct ProgressBar: View
{
    @State var degress = 0.0
    @Binding var shouldLoad: Bool

    var body: some View
    {
        RoundedRectangle(cornerRadius: cornerRadiusValue)
            .trim(from: 0.0, to: CGFloat(degress))
            .stroke(Color.Scheme.main, lineWidth: 2.0)
            .frame(width: 300, height: 40, alignment: .center)
            .onAppear(perform: shouldLoad == true ? {self.start()} : {})
    }

    func start()
    {
        Timer.scheduledTimer(withTimeInterval: 0.3, repeats: true)
        {
            timer in

            withAnimation
            {
                self.degress += 0.3
            }
        }
    }
}

show your own try and refer this https://stackoverflow.com/help/how-to-ask, and then someone could help you. — Asperi, May 12 '20 at 12:54

score 6 · Answer 1 · edited Aug 23 '22 at 14:01

Here is simple demo of possible approach for [0..1] range progress indicator.

Updated: re-tested with Xcode 13.3 / iOS 15.4

struct ProgressBar: View {
    @Binding var progress: CGFloat // [0..1]

    var body: some View {
        RoundedRectangle(cornerRadius: 10)
            .trim(from: 0.0, to: CGFloat(progress))
            .stroke(Color.red, lineWidth: 2.0)
            .animation(.linear, value: progress)
    }
}

struct DemoAnimatingProgress: View {
    @State private var progress = CGFloat.zero

    var body: some View {
        Button("Demo") {
            if self.progress == .zero {
                self.simulateLoading()
            } else {
                self.progress = 0
            }
        }
        .padding()
        .background(ProgressBar(progress: $progress))
    }

    func simulateLoading() {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            self.progress += 0.1
            if self.progress < 1.0 {
                self.simulateLoading()
            }
        }
    }
}

Hey thanks for the help. Is there a way to use this loading when waiting a response from the server? — Johanna, May 18 '20 at 10:54
@Johanna, if you know length of expected data then just update progress as percent of received one. If no, then something like undeterminted would be more appropriate. — Asperi, May 18 '20 at 11:11

gandhi Mena · Answer 2 · 2020-06-24T00:21:57.407

Available for XCode 12.

import SwiftUI

//MARK: - ProgressBar
struct ContentView: View {
    
    @State private var downloaded = 0.0
    
    var body: some View {
        ProgressView("Downloaded...", value: downloaded, total: 100)
    }
}

//MARK: - Circular ProgressBar
struct ContentView: View {
        
    @State private var downloaded = 0.0
        
    var body: some View {
        ProgressView("Downloaded...", value: downloaded, total: 100)
            .progressViewStyle(CircularProgressViewStyle())
    }
}

Rectangle progress bar swiftUI

2 Answers2

Linked