Circle Progress Bar Indicator

Hi all,

I am hoping to add an interaction onto my website similar to what Tech Crunch does here:Nuwa Pen launches with misleading Kickstarter campaign | TechCrunch

(Top Right Component on Tech Crunch): Interaction / Component: Sticky Progress Bar on Scroll Page that is a circle and also close / check button.

Has anyone come across how to replicate this interaction? I saw one video that Ben Parker did (great job, Ben!), but it isn’t completely clean.

Would anyone be able to help or point me in the right direction?

Here is my public share link: LINK
(how to access public share link)

Hey that’s pretty cool, so I decided to give it a crack.
It worked pretty well.

1 Like

Nice : but if you prefer a 100% nocode you can use a lottie and an a “while scrolling into view” effect on webflow and target the lottie to 0% a the beguining and 100% at the end.


@Romuald_Jay IMO is more efficient use a few bytes of code than make a request to upload giant animated lottie for simple thing like this. It is same idea I saw here where “no-code dev” has Hero section as 2mb image instead using HTML and CSS. :face_with_raised_eyebrow:

1 Like

Webflow Community is awesome. I"ll take look at all of these options. Thank you all.

Romauld, that’s a very nifty feature. I had not realized that when you target a Lottie, you have the ability to control its time dimension as a playback % position too. Slick!

Updating my demo with 3 variations.

The JS + Lottie variant was my favorite, because of the ability to synch the playback frame, but now that’s only useful if I want to display something else like % complete or read time remaining.

Otherwise, Lottie + Interaction is super slick.

@Stan Totally agree on size, but for this, the lotties are miniscule. It’s one of the few places I’ve found where Lotties really make sense as the right tech for the job.

UPDATE: @Chad_Ostergren the cloneable is updated, and Romauld’s approach really works well, especially if you can find/create the right lottie for your indicator.

A we both know there is many ways how to achieve identical result and if you choose lottie instead SVG that’s your way to animate progress bar but I’m still convinced that lottie have different purpose to be used for. :person_shrugging:

Big lotie are bad. But a pie in lottie will be less than 2k