How To Add Custom Progress Bar To Represent The Status of Any Running Task in iOS App

Progress bars generally depicts the progress of any running task over time. In simple words, they are one of those filling bars that fill itself upon completion of a task. The custom progress bar, on the other hand, can be easily implemented using UIProgressView interface component.

For instance, the custom progress bar can used for any iPhone app development project that include displaying the tasks like downloading, uploading, or notifying people that a task is running, how much is remaining, and how much is completed.

And in our today’s iOS app tutorial, we’ll build a simple app to demonstrate the custom progress bar implementation process.

Let’s Get Started

Open your Xcode and create a new project under file menu.

Select Single View Application as a project type and click next.

In the next tab, write your project details.

Once you create a new project successfully, go to Main.storyboard and select ViewController.

Now drag and drop UIProgressView from “Show the object library” section.

@IBOutlet weak var lblPercentage: UILabel!
@IBOutlet weak var progressBar: UIProgressView!
@IBOutlet weak var btnStart: UIButton!
@IBOutlet weak var lblValue: UILabel!

You can do the initial setup for UIProgressView from Attribute inspector like tint color, progress color, image, initial value etc.

Add a timer and time variable for update progress bar with NSTimer.

var time : Float = 0.0
var timer: NSTimer?

Set start button to show progress of UIProgressView.

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
btnStart.layer.cornerRadius = btnStart.frame.size.height/2
btnStart.layer.masksToBounds = true
}

Define Startbutton action definition.

//MARK: Action for update progressbar with timer
@IBAction func actionStart() {

//Invalid timer if it is valid
if (timer?.valid == true) {
timer?.invalidate()
}

time = 0.0
progressBar.setProgress(0.0, animated: true)
lblPercentage.text = "\(progressBar.progress*100)%"+" of 10"
lblValue.text = "\(time)"+" out of 10"

timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector:#selector(ViewController.setProgress), userInfo: nil, repeats: true)

}

Progress View will update during the call of “setProgress” method by timer.

//MARK: Show progress
func setProgress() {
time += 1.0
progressBar.setProgress(time/10, animated: true)

lblPercentage.text = "\(progressBar.progress*100)%"+" of 10"
lblValue.text = "\(time)"+" out of 10"

if time >= 10 {
timer!.invalidate()
}
}

And done!

Here’s the output:

So now that you know the implementation process, you can start implementing it in your iphone app project. Though, it’s also possible to use this feature for various other jobs, but if you’re just starting out or an Entrepreneur, consider taking expert opinion or hire iphone app developer to build your iphone app.

Grab a free copy of UIProgressView example demo from Github.

You may also like,

• How to Add Download Button in Your iOS App Using Progress View
• How to Embrace The Power of Android Progress Bar As a Usability Feature

This page was last edited on May 25th, 2020, at 6:43.