iOS Progress Bar (Progress View)

In this tutorial, we’ll be discussing the UIProgressView component and create a progress bar in our iOS Application.

iOS Progress Bar - UIProgressView

ProgressView is used to display the progress of any long running activity such as downloading/uploading/waiting for a response from web service to the user. This is a vital UI element which when absent could give the users an impression that the application is not responding. Launch XCode Single View iOS Application. Let’s add the UIProgressView in our Main.storyboard ProgressView can have a value between 0.0 and 1.0 and would be indicated by the blue color. Values outside this interval would be rounded off to either of them depending on whether it’s greater than 1.0 or less than 0.0.

iOS Progress View Properties

ProgressView has the following properties:

• progressTintColor - Used to change the UIColor of the progress part i.e. the filled part in the ProgressView.
• trackTintColor - Used to change the UIColor of the track i.e. the unfilled part of the ProgressView.
• ProgressBarStyle - There are two styles: default and bar. The bar style has a transparent track.
• trackImage - Here an image is used instead of color for the unfilled part.
• progressImage - Image is used to show the progress.

Let’s begin our implementation. Our Main.storyboard contains a button to start/stop the ProgressView. The code for the ViewController.swift class is given below:

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var btn: UIButton!
    var isRed = false
    var progressBarTimer: Timer!
    var isRunning = false
    @IBAction func btnStart(_ sender: Any) {
        
        if(isRunning){
            progressBarTimer.invalidate()
            btn.setTitle("Start", for: .normal)
        }
        else{
        btn.setTitle("Stop", for: .normal)
        progressView.progress = 0.0
        self.progressBarTimer = Timer.scheduledTimer(timeInterval: 0.5, target: self, selector: #selector(ViewController.updateProgressView), userInfo: nil, repeats: true)
        if(isRed){
            progressView.progressTintColor = UIColor.blue
            progressView.progressViewStyle = .default
        }
        else{
            progressView.progressTintColor = UIColor.red
            progressView.progressViewStyle = .bar
            
        }
        isRed = !isRed
        }
        isRunning = !isRunning
    }
    @IBOutlet weak var progressView: UIProgressView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        progressView.progress = 0.0
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    @objc func updateProgressView(){
        progressView.progress += 0.1
        progressView.setProgress(progressView.progress, animated: true)
        if(progressView.progress == 1.0)
        {
            progressBarTimer.invalidate()
            isRunning = false
            btn.setTitle("Start", for: .normal)
        }
    }
}

IBOutlet and IBActions are created by linking the Main.storyboard views to the Swift file. We start a Timer when the Button is clicked which updates the progress bar through the selector function passed: updateProgressView. Every alternate timer would toggle the style of the ProgressView. The output of the above application when run on the simulator is given below:

Increasing the Height of the ProgressView

We can change the height of the ProgressView in the following way:

progressView.transform = progressView.transform.scaledBy(x: 1, y: 8)

This transforms the height by 8 times. Let’s see how it looks in the simulator. You can also change the height from the storyboard in the constraints: The second approach is better since the first one might pixelate the ProgressView if we try to shape the edges.

Rounded Corners ProgressBar

Add the following code in the viewDidLoad() function.

override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        progressView.progress = 0.0
        
        progressView.layer.cornerRadius = 10
        progressView.clipsToBounds = true
        progressView.layer.sublayers![1].cornerRadius = 10
        progressView.subviews[1].clipsToBounds = true
    }

We set the corner radius to half of the height of the ProgressView. Following is the output of the application with the updated code. This brings an end to this tutorial. You can download the project from the link below:

iOSProgressView