SWIFTUI 2.0 : Simplest Way To make a Progress Bar (Circular and Regular)

Jung Cha
2 min readJun 16, 2021

--

The best way to create a view is to create a class but when we are only using it just for a one time use, it is best to keep it simple and this way does not require to create a class.

Simple Progress Bar:

Simple Progress Bar

This method is an alternative to ZStack but better. The reason is because in a ZStack we cannot know the frame of the view that we are overlapping it with unless we setup their specific sizes.

If we use overlay, we can get the size of the specific item that we are willing to overlap with.

The 0.2 in the code can be replaced with a variable that contains the percentage in decimal and in this case it is 20%

Circular Progress Bar:

Circular Progress Bar

Code:

In this case we use the trimming method. Usually the trimming method draws the progress line from the center of the right side, but if we rotate it -90 degrees, we can get it to start drawing the progress since the top.

--

--

No responses yet