Creating Custom Progress Bar in iOS using Swift

As I started developing my own iOS app, often I faced the need to customize certain built-in UI elements to suit the application’s requirements. One such for me was to customize a progress bar.

In this article, I will go through the basics of building a custom progress bar. First, understanding of the built-in UIProgressView helped. When I say understanding, I mean just the key properties such as Progress tint, Track tint and Progress value shown in the Attributes inspector of XCode.

• Progress tint — used in the foreground layer to show the progress.
• Track tint — used in the background layer to show the outline of the progress bar.
• Progress value — a pointer value that maintains the current state of progress

Lets get into building the custom progress bar part. The requirement is to create a circular progress bar.

Custom Progress Bar

3 steps to create the custom progress bar

• Creating a path using UIBezierPath() in a custom view.
• Creating two CAShapeLayer — one for foreground and another for background.
• Setting the progress by manipulating the StrokeEnd value.