First, there's the progress bar itself, which we'll position at the top of the website with fixed positioning.
Next, there's a frame nested within the progress bar, known as the "line". We're going to animate this "line" from 0% width to 100% width as you scroll down the site with a code override applied to the frame.
Finally, there's an additional "head" frame within the 'line' frame. This acts like a glow at the end of the scroll bar line. We'll position this absolutely and pin it to the right side of the "line".
The code override works by transforming the 'line' frame's width from 0% to 100% between the "start" and "end" scroll sections on your site.
So, you'll need to add a scroll section called "start" where you want the progress bar animation to kick off, and a scroll section called "end" where the scroll bar should reach the right edge of the page.
Just copy and paste the code override from below into your file.
Watch the full video tutorial for more guidance.
Step / 01
Remix the project.
Step / 02
Copy the progress bar.
Step / 03
Paste in your project and customize it.
Code override for the scroll progress bar line
Copy this code and paste it into a new override in your Framer project. Next, apply it to the 'line' frame that's within the progress bar.