Progress Bars in iOS 18 - #30DaysOfSwift
Vaibhav Dwivedi

Vaibhav Dwivedi @thevediwho

About: From Product vision to pixel-perfection, I'm a seasoned Product Manager turned iOS App Developer, leveraging Swift and SwiftUI to build iOS Apps with ShipiOS.app project!

Location:
Planet Earth
Joined:
Feb 5, 2018

Progress Bars in iOS 18 - #30DaysOfSwift

Publish Date: Oct 28 '24
1 0

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! 🎉

Comments 0 total

    Add comment