How to write Kickass Animated Circle Progress Bar (Ep 1)

Ever wanted to integrate animation into your iOS applications? Struggled with learning about animation with the Swift language? Today’s video will teach you how to use CABasicAnimation to animate a circular stroke with CAShapeLayer. Enjoy.

Intermediate Training Core Data

Instagram Firebase Course

Facebook Group

iOS Basic Training Course

Completed Source Code

Follow me on Twitter:


Xem thêm bài viết khác:

Article Categories:
Giải Trí

All Comments

  • watched a few of your videos related to animation. Great code! Anything about Lottie?

    Ning June 5, 2020 11:32 am Reply
  • Very helpful

    Bindass Gaming June 5, 2020 11:32 am Reply
  • Using kCAFillModeForwards is actually causing the animation to essentially run forever. CABasicAnimation is modifying the presentation level of your object, but not its internal model. So using fillMode and isRemovedOnCompletion is not the best solution here because it's essentially telling CoreAnimation to run the animation forever (but it's stuck at the toValue), and never actually complete even though it looks visually correct. If you query that CAShapeLayer for its strokeEnd later on, it will be 0.0 internally, because again, CoreAnimation animates by modifying the presentation layer only. What you want to do is modify the internal model of the object in addition to the presentation, so later on you can query for that data and it will be what you expect. The fix is simple, give it a fromValue and right after the add() animation call, set the actual value to the destination value. Like so:

    let strokeAnimation = CABasicAnimation(keyPath: "strokeEnd")
    strokeAnimation.fromValue = 0.0
    strokeAnimation.toValue = 1.0
    strokeAnimation.duration = 2.0
    self.strokeEnd = 1.0
    self.add(strokeAnimation, forKey: "strokeEnd")

    Prayash June 5, 2020 11:32 am Reply
  • Awesome Video! I am attempting to utilize the Circular Animation for something other than tracking a download, even though that is a awesome way to use this and I ran into so much trouble trying to understand why setting the toValue to 0.8 filled the circle when the documentation says it should be 0.0 to 1.0 for the complete circle, found out using the start and end angle in the video, the circle is drawn 1.25 times, hence why 0.8 toValue was a complete circle with the animation, however, using (startAngle: -.pi / 2.0, endAngle: 3 * .pi / 2.0) fixes this issue incase anyone else was encountering this error when trying to use this tutorial in other ways. I don't know if the start/end angle in the video is required in order to track the download properly, but nevertheless I thought I would share. Keep up the great videos!

    Chandler Morris June 5, 2020 11:32 am Reply
  • Great vid, for those watching now kCAFillModeForwards has been deprecated in Swift 4.2,
    it's now basicAnimation.fillMode = .forwards

    Damian Diaz June 5, 2020 11:32 am Reply
  • one of the best short tutorial that's I watched . that is exactly what I need . thanks you Brian

    Hamid Ansari June 5, 2020 11:32 am Reply
  • I know this video is over two years old but wow it was awesome. Using vanilla-Swift joke) Some of the names of the methods were changed but swift helped out on providing me the new names. Which i didnt know it could do that. Your officially my number one swift ios source! I hope you have a blessed day if you ever see this!

    ALIAS_one11 De Papel June 5, 2020 11:32 am Reply
  • How to use it instead of activity indicator.

    ธนากร จริยศักดิพงษ์ June 5, 2020 11:32 am Reply
  • Hi! I see this video is a bit old, but hopefully you could answer anyways 🙂 Is it possible to use this visuals but for tracking XP for a user in a game? Say the user did something, and after completed this bar comes up, shows the new XP gained and moves bar a couple % towards then new Level. When 100% Xp is gained, it changes Level to 2, and start the tracking for road to level 3 (witch will be a bit longer road than the one between level 1-2.

    Or is this something thats not possible to do with swift? The XP and level tracking.

    Thanks for best channel on YT!

    haa baa June 5, 2020 11:32 am Reply
  • Genial!!! Muchas gracias. Perfectamente explicado

    Raquel Aranda June 5, 2020 11:32 am Reply
  • Excellent tutorial as always! However, the circle is being overdrawn, causing it to appear to complete sooner than it does. The fix is : self.startAngle = -CGFloat.pi / 2 self.endAngle = 1.5 * CGFloat.pi

    Hazy Studios June 5, 2020 11:32 am Reply
  • thanks so much for this video!

    Niki Agrawal June 5, 2020 11:32 am Reply
  • As always, wonderful content, thank you a ton!

    Serghei Tricolici June 5, 2020 11:32 am Reply
  • Nice tutorial Brian. One quick question i have is if i divide the circular shapelayer in 6 parts, how do i control the animation to only animate 1/6 part when i tap and after the 6th tap it will complete the circle. any quick tip for me?

    Nilesh Darji June 5, 2020 11:32 am Reply
  • It was awesome, love the pace of your tutorials. Unlike other channels that provide lengthy videos in which most of the time the guy is saying irrelevant things, you just get to the point.

    Kasra Babaei June 5, 2020 11:32 am Reply
  • How are we able to build 3 circular progress bars in one view controller?

    Itzel June 5, 2020 11:32 am Reply
    Speed Art iOS

    Gerasim Israyelyan June 5, 2020 11:32 am Reply
  • Use endAngle: 1.5 * CGFloat.pi if you want the correct portion to be filled

    Mihai Pop June 5, 2020 11:32 am Reply
  • cooool

    Юрий June 5, 2020 11:32 am Reply
  • Ty for this video . So good.

    Umut Dönmez June 5, 2020 11:32 am Reply
  • I have been created a donut chart by using the tutorial it's very helpful for me. thanking you

    hari kiran June 5, 2020 11:32 am Reply
  • Are tella lanjakodaka . xamarin native lo chasi chupinchara . ne modda ga

    mohammed shafiullah June 5, 2020 11:32 am Reply
  • Amazing series! Absolute gold

    Kris Harris June 5, 2020 11:32 am Reply
  • for part 2

    Vaidas Skardžius June 5, 2020 11:32 am Reply
  • Hi! This tutorial is so nice. I have only one question. How can I add this animated circle in a CollectionViewCell? Thank you!

    Adrian Draghici June 5, 2020 11:32 am Reply
  • How do you make the label for just the animation to go from 0 to 100 if you just click the button??

    Riley Lunz June 5, 2020 11:32 am Reply
  • Hi brian,

    Great video. Is it possible to have a gradient color for that circular progress bar ?


    AwaisFayyaz Dev June 5, 2020 11:32 am Reply
  • That video was good… real good!

    James Allan June 5, 2020 11:32 am Reply
  • That was really great. Keep up the good work. That helped me out a lot.

    Mark Lopez June 5, 2020 11:32 am Reply

Leave a Reply

Your email address will not be published. Required fields are marked *