Framer / How to Create a Progress Bar Triggered by Scroll

Using Framer, let's create a progress indicator that is triggered by scroll position. When you reach the bottom of the section your progress bar will fill the screen.

[tonyroslund]

Daaaang! Super slick. Exactly what I was looking for, thanks for taking time to share. Subscribed!

[MohammadAlAmin-rp]

this is very simple plz go to style and click + icon then show strock then choose strock color and remove feel color . then problem is solved .

[cosmictofu]

great tutorial and easy to follow. Is there a way to have it scale from left to right instead of from the center?

[rainivargas]

Thank you for this extremely helpful video! For some reason, my bar starts off super thin (like hairline thin) and then increases in height as the page scrolls. It didn't maintain the height / thickness like yours did. Is there a way to fix this?

[Darkmanxdmx]

Hey Danny, thank you so much for this. Super, super helpful! Question: My blog posts are divided into multiple sections, not only 1 as you present in your tutorial. Is there any workaround for that to make the progress happen? Thanks a ton!

[tomwatson]

Nice content! Can this be done vertically? Could you do it with positioning 'sticky'?