# PaintCode Tutorial for Developers: Custom Progress Bar **URL:** \ **Category:** 🎓 Courses & Articles\ **Created:** [April 15, 2016, 1:02pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442 "2016-04-15T13:02:03Z")\ **Posts on this page:** 17\ **Page:** 1
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [April 15, 2016, 1:02pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/1 "2016-04-15T13:02:03Z")
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 [https://www.raywenderlich.com/1209-paintcode-tutorial-for-developers-custom-progress-bar](https://www.raywenderlich.com/1209-paintcode-tutorial-for-developers-custom-progress-bar) ---
**Author:** ![fogmeister](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/fogmeister/32/30746_2.png) [@fogmeister](https://forums.kodeco.com/u/fogmeister)\ **Post date:** [April 15, 2016, 3:28pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/2 "2016-04-15T15:28:56Z")
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 😃 ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [April 15, 2016, 3:42pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/3 "2016-04-15T15:42:33Z")
Thank you for the reply @fogmeister 🙂 We were actually thinking of doing that within PaintCode to keep everything there. Hope you enjoy the tutorial 😄 ---
**Author:** ![jcubed](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/jcubed/32/76428_2.png) [@jcubed](https://forums.kodeco.com/u/jcubed)\ **Post date:** [April 16, 2016, 5:19pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/4 "2016-04-16T17:19:12Z")
Thanks Felipe! Would love some more PaintCode tutorials. 👍 ---
**Author:** ![joltguy](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/joltguy/32/100397_2.png) [@joltguy](https://forums.kodeco.com/u/joltguy)\ **Post date:** [April 21, 2016, 5:17pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/5 "2016-04-21T17:17:13Z")
Excellent tutorial! This was a great PaintCode refresher for me. ---
**Author:** ![atul](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/atul/32/61841_2.png) [@atul](https://forums.kodeco.com/u/atul)\ **Post date:** [May 15, 2016, 7:36am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/6 "2016-05-15T07:36:43Z")
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. Thx. ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [May 19, 2016, 4:20pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/7 "2016-05-19T16:20:24Z")
Thanks @jcubed ! We’ll definitely keep that in mind and remain open to doing more cool stuff with PaintCode in the future 🙂 ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [May 19, 2016, 4:22pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/8 "2016-05-19T16:22:54Z")
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 🙂 ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [May 19, 2016, 4:23pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/9 "2016-05-19T16:23:27Z")
@joltguy Thank YOU for taking the time to read the article and support what we do! 😃 ---
**Author:** ![mouadettaghouti](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/mouadettaghouti/32/81494_2.png) [@mouadettaghouti](https://forums.kodeco.com/u/mouadettaghouti)\ **Post date:** [August 9, 2016, 3:52pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/10 "2016-08-09T15:52:12Z")
Hello 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 ? HELP ME PLEAASE ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [August 10, 2016, 11:00pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/11 "2016-08-10T23:00:19Z")
Hi hi 🙂 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 🙂 ---
**Author:** ![sapelaez](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/sapelaez/32/69598_2.png) [@sapelaez](https://forums.kodeco.com/u/sapelaez)\ **Post date:** [July 31, 2017, 9:07pm UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/12 "2017-07-31T21:07:17Z")
Hi! 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? Thanks! ---
**Author:** ![iemrollin](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/iemrollin/32/101506_2.png) [@iemrollin](https://forums.kodeco.com/u/iemrollin)\ **Post date:** [August 22, 2017, 2:26am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/13 "2017-08-22T02:26:47Z")
How do I stop the bleeding? I’m new to PaintCode and it’d much appreciated if you could show me how 🙂 ---
**Author:** ![airjordan12345](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/airjordan12345/32/93546_2.png) [@airjordan12345](https://forums.kodeco.com/u/airjordan12345)\ **Post date:** [August 22, 2017, 2:39am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/14 "2017-08-22T02:39:27Z")
I’m not sure I understand what you mean with stopping the bleeding 🙂 ---
**Author:** ![iemrollin](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/iemrollin/32/101506_2.png) [@iemrollin](https://forums.kodeco.com/u/iemrollin)\ **Post date:** [August 22, 2017, 3:09am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/15 "2017-08-22T03:09:58Z")
Sorry I should be more specific 🙂 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 ---
**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\ **Post date:** [August 22, 2017, 9:11am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/16 "2017-08-22T09:11:52Z")
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! :] ---
**Author:** ![shogunkaramazov](https://assets.chunter.kodeco.com/user_avatar/forums.kodeco.com/shogunkaramazov/32/108826_2.png) [@shogunkaramazov](https://forums.kodeco.com/u/shogunkaramazov)\ **Post date:** [August 22, 2017, 9:11am UTC](https://forums.kodeco.com/t/paintcode-tutorial-for-developers-custom-progress-bar/13442/17 "2017-08-22T09:11:57Z")
Closed on August 22, 2017, 9:11am UTC