Circular Progress Bar show in Apple Watch App
Recently, I worked on a project where I needed to show 8 circular progress bars of unique colours. I started looking for some existing objects, libs but no luck.
Then I explored Stack overflow and other options. Luckily, I found this amazing website.
So without wasting time, let’s start with the coding part.
We have to download 0–100% progress images from RadialChartImageGenerator site and added these downloaded images into our project app assets. While adding these images, set render type as Template Image.
Template images are the way of tinting any kind of image.
WKInterfaceImage (UIImageView in iOS App) provides two options for show animation
We can show the circular progress bar with these two options by adding 100 images of 8 unique colour types, but, to be honest, I don’t want to use so many images as it’s not an optimal solution.
To solve this issue, we will create 100 coloured mask images at runtime and animated them and we have done.
If you have found a better way of doing it, add it in the comments and I’ll update the article.
You can download the sample project from here. I hope this piece was helpful. Thank you for reading this article.