CODE OVERRIDE
Scroll Progress Bar for Framer
The Scroll Progress Bar lets you customize thickness and colors, offering solid, gradient, or multi-color options to fit your design.
Introduction
With this component for Framer, you can create dynamic and visually engaging progress indicators that adapt seamlessly to your designs. The Scroll Progress Bar is a simple framer resource, yet versatile, providing a customizable scrolling experience that enhances interactivity and user engagement.
![](https://framerusercontent.com/images/FyhfDBagj9rhcAiyNzFmC2b5pcs.png)
Thickness & Color Control
The Scroll Progress Bar provides full control over thickness and color settings. Adjust the bar’s thickness to match your layout and choose from solid, gradient, or multi-color schemes to perfectly integrate with your design’s palette.
![](https://framerusercontent.com/images/ElZGqWnNNzFJe9bM0PUcTd1mE.png)
Solid Mode: Offers a single, clean progress bar that grows as the user scrolls. This mode is ideal for minimal and modern designs, ensuring a seamless and elegant user experience.
Gradient Mode: Allows you to use a customizable gradient that fills dynamically as the user scrolls. With its smooth transitions, this mode adds an extra layer of sophistication to your design.
Multi-Color Mode: Divides the progress bar into distinct segments that reveal themselves progressively as users scroll. Perfect for bold and interactive designs, this mode brings a vibrant and dynamic touch to your projects.