DEV Community

Cover image for Progress Bars in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi
Vaibhav Dwivedi

Posted on

Progress Bars in iOS 18 - #30DaysOfSwift

Day 19: Tell Your Users About The Progress ⏳

Welcome to Day 19 of the #30DaysOfSwift series!

Learn today about how to implement progress bar in your SwiftUI app.

Image description

Why Use Progress Indicators?

  • User Feedback: They inform users that a task is in progress, improving the overall user experience.
  • Task Transparency: Users can gauge how long they might need to wait, which can reduce frustration.
  • Modern UI: Adding progress indicators enhances the aesthetics and functionality of your app.

Example Use Case: Implementing a Progress Bar

In this example, we’ll create a simple progress bar that updates as a task progresses.

import SwiftUI

struct ContentView: View {
    @State private var progress = 0.0 // State variable to track progress

    var body: some View {
        VStack {
            ProgressView("Loading...", value: progress, total: 100) // Progress bar
                .progressViewStyle(LinearProgressViewStyle()) // Style of the progress bar
                .padding()

            Button("Start Loading") {
                startLoading() // Start the loading process
            }
            .padding()
        }
        .padding()
    }

    func startLoading() {
        progress = 0.0 // Reset progress
        for i in 1...100 {
            DispatchQueue.main.asyncAfter(deadline: .now() + Double(i) * 0.1) {
                progress = Double(i) // Update progress
            }
        }
    }
}

@main
struct ProgressIndicatorApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView() // Main content view
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Now it’s your turn! Try adding progress indicators to your app to keep users informed during loading processes!

P.S. Check out full series at shipios.app/componenets

Happy Coding! 🎉

Top comments (0)