Recreate this Loader (ochi.design)

[Omkarspace]

'm trying to create a preloader animation using GSAP that resembles the one on ochi.design . It has a spinning circle that fills up a progress bar as content loads.

I'm familiar with GSAP basics like timelines and tweens, and I'm considering using SVG for the circle and progress bar elements.

Can anyone provide guidance on achieving a smooth spinning animation and progress bar update using GSAP?

[mvaneijgen]

Hi @Omkarspace welcome to the forum!

 

What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

We don't have the resources the provide tutorials on "how do I create this cool effect I saw on another site", I hope you understand. That said I don't see anything complicated on the site you linked I see a tween that updates some text from 0 to 100, this you can do with updating the textContent in a tween and for updating the progress of a tween yo can use .progress() (https://gsap.com/docs/v3/GSAP/Tween/progress()) and you somehow have to calculate how much % your side has done loading and then feed that to the .progress() where you convert 100% to a value between 0 and 1 where 0 is 0% and 1 is 100% 

 

@Carl has a cool snippet for tweening numbers check it out. Hope it helps and happy tweening!