Hello everyone! I’m here again with an article.
We will learn how to make an animated circular progress bar in this article. Well, what is circular progress bar?
Circular progress bars are a nice and compact way to visualize progress information for users of your iOS app.
Step 1: Let’s create a new XCode project and enter a name.
Step 2: Add an object of type UILabel.
Step 3: Create a new .swift file on your project directory and name it “CircularProgressBarView”.
- Import UIKit and add UIView type to this view.
Step 4: Now, let’s initialize this view.
Step 5: Create a function for circular path.
Circular Path: It’s a component of UIBezierPath.
UIBezierPath: A path that consists of straight and curved line segments that you can render in your custom views.
- We will use UIBezierPath. OK, call the createCircularPath method from override init and required init methods.
- Opss! Define the following properties to your class:
- What are Circle and Progress Layer?
CAShapeLayer: A layer that draws a cubic Bezier spline in its coordinate space.
Circle Layer: Creates an empty circle on your view.
Progress Layer: Fills the circleLayer.
Step 6: Add start and end point values.
Wow. Why is startPoint defined as “CGFloat(-Double.pi / 2)”? The same thing exists on endPoint.
If we want progressLayer to start from 3π / 2, we can give this value to endPoint. Accordingly, since circleLayer is 360 degrees, the startPoint must be -π / 2.
Step 7: Add an animation for progressLayer.
Step 8: Call this view from ViewController.
OK. Let’s check this.
Thank you for reading.
