Scroll Progress Bar

Nocode

Show the user's progress of scrolled content in the page header of your website.

One of the most sought out interactions for Framer sites, this component adds a progress indicator wherever you choose to include it and fills from 0% to 100% when you scroll.

This is perfect for any long-form content you may have such as blog posts or articles that may need to give the reader a little heads up for how long it really is.

With this component, you can adjust the color to be flat or a gradient, and activate or deactivate a glow. This can be placed anywhere on your page, with no coding required.

Tutorial

Scroll Progress Bar
Scroll Progress Bar
Scroll Progress Bar

Properties

Last updated 10/29/23

Requires code editing

Requires an API

Everything Framer

Apply to join the community for Framer creators

Get unique resources to add to your sites and learn how to become a Framer Pro

Limited to 50 places only

Everything Framer

Apply to join the community for Framer creators

Get unique resources to add to your sites and learn how to become a Framer Pro

Limited to 50 places only

Everything Framer

Apply to join the community for Framer creators

Get unique resources to add to your sites and learn how to become a Framer Pro

Limited to 50 places only

Everything you need to be a Framer creator

© 2024 All rights reserved

Everything you need to be a Framer creator

© 2024 All rights reserved

Everything you need to be a Framer creator

© 2024 All rights reserved

Scroll Progress Bar

Scroll Progress Bar

Scroll Progress Bar