Create an animated custom progress bar in SwiftUI

[@popski.]

A very useful video with clear instructions on how to create a progress bar. Thanks!

[@mikemikina]

I'm glad you liked it! 😊

[@Steph_d_a]

Amazing video!

[@mikemikina]

Thanks!

[@SonHD92]

Hi thank you for this tutorial, I put this custom progress in a scrollview. It's work fine when the app first run, but when I swipe left, the progress is hided then I swipe back to unhide, the animation is freezed. Do you know why?

[@mikemikina]

How do you start the animation? To what element is the progress bar connected?

[@SonHD92]

@@mikemikina i put it in onAppear just like you did. All I know is onAppear just call only once when the view rendered, i tried to trigger it by a flag from parent view but not work. Is there anyway to force the view re-render? I don’t have much experience with SwiftUI, just move from UIKit to SwiftUI for 2 months

[@mikemikina]

Not exactly, onAppear should be called each time the view appears on screen, usually when it disappears and appears again, it will be called again. Forcing a view to re-render doesn't work like it used to in UIKit. You have to think about it a little differently. The view is more like a data driven, it adapts to the data you provide. I would focus on a part where data should drive the progress view. It's hard to tell more without seeing the code. If you could post a sample on Github, it would be much easier 🙂

[@SonHD92]

@@mikemikina You're right. But as I said before, I have to put the progress view in a scrollview due to our project component. Then I think views inside scrollview are not trigger both onAppear or onDisapear when swipe backward/forward. I have to force refresh the view to make it trigger the onApear by recalled API with new data and thankfully my PO agree with this temporary solution :)

[@mechanicalconcepts1527]

same animation how to run based on every seconds 1% increase container width of screen

[@mikemikina]

Not sure if I got this, every second you would like to increase you progress bar by 1% of the whole screen size? 🤔