// Tutorial //

iOS Progress Bar (Progress View)

Published on August 3, 2022
Default avatar
By Anupam Chugh
Developer and author at DigitalOcean.
iOS Progress Bar (Progress View)

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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 ios progressview add to 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. ios progressview main storyboard 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: ios progressview output

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. ios progressview change height You can also change the height from the storyboard in the constraints: ios progressview change height constraint 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. ios rounded progress bar This brings an end to this tutorial. You can download the project from the link below:

iOSProgressView


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up
About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Was this helpful?

offscreen rendering

- songxing

    Can i get the IOSProgressView code in Objective-c

    - Saran