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.

sampleprogress1

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

sampleprogress2

In the next tab, write your project details.

sampleprogress3

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

sampleprogress4

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

sampleprogress5

sampleprogress6

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

sampleprogress7

sampleprogress8

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

sampleprogress9

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:

ss2

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.

This page was last edited on July 5th, 2018, at 3:50.
 
 

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now