How to Show a ProgressView in SwiftUI
Tags: ios, swift, swiftui
Published: 2020-09-17 01:22:36

---
title: How to Show a ProgressView in SwiftUI
published: true
description: 
tags: #ios #swift #swiftUI
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>At WWDC 2020 Apple introduced <a href="https://developer.apple.com/documentation/swiftui/progressview"><strong>ProgressView</strong>'s</a> to SwiftUI. A <strong><a href="https://developer.apple.com/documentation/swiftui/progressview">ProgressView</a></strong> allows us to show either a circular progress view or a linear progress view for when tasks are loading in our app. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The first type of progress view we will look at is the <strong>Indeterminate Progress</strong> <strong>view</strong>. The indeterminate progress view creates a spinning loading view. The example below shows how we can easily add this into our code.  </p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">ProgressView()</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>We can also add text to the progress view by adding a string inside the parentheses.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">ProgressView("Loading...")</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":952,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-14-at-8.13.53-pm.png?w=266" alt="" class="wp-image-952"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The second type of progress view we will look at is the <strong>Linear Progress</strong> <strong>view</strong>. Linear progress views are great for when we have something loading and we want to show the progress to our user.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To make a linear progress view we need to specify two parameters, the <strong>current value</strong> and the<strong> total value</strong> of our progress view.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">ProgressView("Downloading…", value: 25, total: 100)  
    .padding()</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":960,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-14-at-10.28.48-pm.png?w=628" alt="" class="wp-image-960"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see in the above example all we did was add a current value of 25 and a total value of 100. This shows our current progress as the blue line at 25% of our total value which is 100%.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can see how a linear progress view works by adding a simple timer that changes the current value over time until it reaches our total value.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct LinearProgressView: View {
    @State private var currentValue = 0.0
    let timer = Timer.publish(every: 0.09, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ProgressView("Downloading…", value: currentValue, total: 100)
            .padding()
            .onReceive(timer) { _ in
                if currentValue &lt; 100 {
                    currentValue += 1
                }
            }
    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:paragraph -->
<p>In the example above we added a <strong>@State</strong> property called <strong>currentValue</strong>. This will update the current progress of our linear progress view. Then we created and added our <strong>timer</strong> to the <strong>.onReceive</strong> modifier. This will update our <strong>currentValue</strong> variable every time our <strong>timer</strong> hits 0.09 seconds. We also check to make sure that the <strong>currentValue</strong> never exceeds the total value of the progress view because this can cause problems in your code and Xcode will yell at us.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lastly we can customize your linear progress view by changing the accent color of the progress bar with the <strong>.accentColor</strong> modifier and by changing the text color by using the <strong>.foregroundColor</strong> modifier.</p>
<!-- /wp:paragraph -->

<!-- wp:syntaxhighlighter/code -->
<pre class="wp-block-syntaxhighlighter-code">struct LinearProgressView: View {
    @State private var currentValue = 0.0
    let timer = Timer.publish(every: 0.09, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ProgressView("Downloading…", value: currentValue, total: 100)
            .padding()
            .onReceive(timer) { _ in
                if currentValue &lt; 100 {
                    currentValue += 1
                }
            }
            .accentColor(.purple)
            .foregroundColor(.red)
    }
}
</pre>
<!-- /wp:syntaxhighlighter/code -->

<!-- wp:image {"align":"center","id":966,"sizeSlug":"large"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttomcom.files.wordpress.com/2020/09/screen-shot-2020-09-15-at-10.01.08-pm.png?w=612" alt="" class="wp-image-966"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If you would like to play around with these progress view examples please check out the code for this blog on my <a href="https://github.com/Tprezioso/ProgressViewSwiftUIBlog">Github</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hope this helps shed some light on how to use progress views in SwiftUI!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>💻 ꩜ Happy Programming! ꩜💻</p>
<!-- /wp:paragraph -->