Progress View Tutorial in iOS8 with Swift

With a progress view, also known as a progress bar, you can show the progress of a task to the user. In this tutorial we will simulate the progress of a specific task. This tutorial is written in Swift so you will need Xcode 6. It can be downloaded at Apple's developer portal.

Open Xcode and create a new Single View Application. For product name, use iOS8SwiftProgressViewTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and make sure only iPhone is selected in Devices.

Go to the Storyboard and change the width to compact. This will change the view to a iPhone portrait mode. 

Next, let's create our User Interface. Drag a button and a label to the main view. Give the button a name of "Start" and the label a name of "0 %". We will dynamically update this label later. Also drag a Progress View to the main view. The main View should look like this.

Select the Assistant Editor. Ctrl-click and drag from the Label to the ViewController class in the ViewController.swift file and create the following outlet

Ctrl-click and drag from the Progress View to the ViewController class in the ViewController.swift file and create the following outlet

Next, Ctrl-click and drag from the start button to the ViewController class and create the following action


We want to keep track of the amount of progress in the progress view. We will use a property observer, which observe and respond to changes in a property’s value. Property observers are called every time a property’s value is set. 

var counter:Int = 0 {
  didSet {
    let fractionalProgress = Float(counter) / 100.0
    let animated = counter != 0
    progressView.setProgress(fractionalProgress, animated: animated)
    progressLabel.text = ("\(counter)%")

The didSet is called immediately after the new value is stored. The fractionalProgress constant keeps track of the progress. The animated constant is always true, except when the property is first set. The setProgress method will animate the bar of the progress view to the current progress value. Next, implement the startCount action method.

@IBAction func startCount(sender: UIButton) {
    progressLabel.text = "0%"
    self.counter = 0
    for i in 0..<100 {
      dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_BACKGROUND, 0), {
        dispatch_async(dispatch_get_main_queue(), {

very time the start button is pressed we will reset the label and the progress view to the start value. Next we create a loop where a sleep is called to slow down the progress, so we can see the progress view animate. On a different queue the counter is incremented, so the code inside the observer property is executed, where the progress view animates. The last thing we will need to do, is to set the progress view to 0 when the application starts. Change the viewDidLoad method to

override func viewDidLoad() {
    progressView.setProgress(0, animated: true)

Build and Run the project, press the Start button and the progress view will animate till it reaches 100%.

You can download the source code of the iOS8SwiftProgressViewTutorial at the ioscreator repository on github.