Group Group Group Group Group Group Group Group Group Forums

PaintCode Tutorial for Developers: Custom Progress Bar

In this PaintCode tutorial for developers, you'll learn how to create a custom animated progress bar.

This is a companion discussion topic for the original entry at

Just an FYI for the progress bar clipping.

If you duplicate the shape for the full bar (the track) then group it with the progress bar you can use the track image as a mask for the progress bar. This will stop the bleeding in PaintCode without needing to use any code at all :smiley:

Thank you for the reply @fogmeister :slight_smile:

We were actually thinking of doing that within PaintCode to keep everything there. Hope you enjoy the tutorial :smile:

Thanks Felipe! Would love some more PaintCode tutorials. :thumbsup:

Excellent tutorial! This was a great PaintCode refresher for me.

Hi @airjordan12345

Thx for the tutorial.
How does it change if we use PaintCode’s Sketch plugin (instead of the full blown PaintCode app)?

I have the Sketch app… so am wondering whether to get PaintCode Sketch plugin or the full app.


Thanks @jcubed !

We’ll definitely keep that in mind and remain open to doing more cool stuff with PaintCode in the future :slight_smile:

Hi @atul,

To be honest I have yet to play with the Sketch plugin so I can contrast and compare it to the full PaintCode app. We’ll keep you posted if there are any developments on that front, or feel free to share any personal experiences you have with either :slight_smile:

@joltguy Thank YOU for taking the time to read the article and support what we do! :smiley:

i have a problem: in this code: override func draw(_ rect: CGRect) {
PaintCodeTutorial.drawProgressBar(frame: bounds,
progress: progress)
xcode give me this error: Use of instance member ‘drawProgressBar’ on type ‘PaintCodeTutorial’; did you mean to use a value of type ‘ PaintCodeTutorial’ Instead ?


Hi hi :slight_smile:

What version of Xcode and Swift are you using? also, ensure that the exported file and class in PaintCode are also PaintCodeTutorial, otherwise you might need to update that so when you access its methods or variables, that it matches what you used to export your assets from PaintCode.

Hope this helps and happy coding :slight_smile:

What if I want to animate the progress between X and Y progress values?

With a song progress it gives the feeling of animating, but what if I want to actually use animations, like UIViewAnimations or CALayer animations?
is it possible?


How do I stop the bleeding? I’m new to PaintCode and it’d much appreciated if you could show me how :slight_smile:

I’m not sure I understand what you mean with stopping the bleeding :slight_smile:

Sorry I should be more specific :slight_smile: I mean how can i stop the active bar from going out of bound of the outline when I set the progress to 1.0

This tutorial is more than six months old, so questions are no longer supported at the moment for it. We will update it as soon as possible. Thank you! :]