Skip to content

SwiftUI: ProgressView

Last updated on June 24, 2020

Recently introduced in WWDC 2020, ProgressView brings to you a circular and linear progress view that can be easily created from the scratch.

Bear in mind that this only supports iOS 14 and above and can only be used in Xcode 12+.

A view that shows the progress towards completion of a task.

Apple Documentation

Prerequisites

To follow along this tutorial, you’ll need some basic knowledge in:

  • A basic familiarity with Swift.
  • At least Xcode 12+
  • Only supports iOS 14+

Indeterminate Progress

Indeterminate refers to a non stop animation and by default, it is in an indeterminate behaviour which spins endlessly.

Linear Progress

In order to create a Linear Progress, you will have to specify the current value and the total value. Currently the value is being set at 50 which is half of the total.

You can even see it in action with the linear progress continuing progressing. First you will create a state where it will keep track of its current progress.

Then you will create a timer with the following code.

Next, use the current progress in the ProgressView

Add an action to the progress view where it will continually add 1 until it reaches 100.

As a result:

Customisation

accentColor allows you to edit the color of the bar.

foregroundColor allows you to edit the color of the title.

Where to go From Here

Feel like SwiftUI is something that you will really like and want to explore more? Check out my page where you can learn how to use most of the components in SwiftUI.

Published inSwiftUI

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © DaddyCoding 2020.