DEV Community

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

Posted on

1

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

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

👋 Kindness is contagious

Engage with a sea of insights in this enlightening article, highly esteemed within the encouraging DEV Community. Programmers of every skill level are invited to participate and enrich our shared knowledge.

A simple "thank you" can uplift someone's spirits. Express your appreciation in the comments section!

On DEV, sharing knowledge smooths our journey and strengthens our community bonds. Found this useful? A brief thank you to the author can mean a lot.

Okay