A Step Guide to Creating Circular Progress Bar in iOS

In this tutorial, we will introduce how to use CircularProgressControl to create a circle progress bar in iOS. CircularProgressControl consists of two CAShapeLayers to draw a static and a animated circle, and a progress label with two lines, the first to describe a timer and the second for a state.

A Step Guide to Creating Circular Progress Bar in iOS

AuthorLinksMade withLast update
carantesOffice HomeObjective-CFeb 14, 2022

How to create?

(1) grab the files in View/CircularProgressView and put it in your project

(2) create a new instance using alloc/initWithFrame

CircleProgressView *progressView = [[CircleProgressView alloc] initWithFrame:CGRectMake(0, 0, 200, 200)];

(3) configure the parameters before set the elapsed time

[_circleProgressView setTimeLimit:3600*8];
[_circleProgressView setStatus:NSLocalizedString(@"circle-progress-view.status-not-started", nil)];
[_circleProgressView setTintColor:[UIColor whiteColor]];
[_circleProgressView setElapsedTime:0];