Progress Scroll Bar

✅ Features

• Horizontal (top/bottom) and Vertical (left/right) progress bars

• Sticky or relative positioning

• Smooth scroll syncing (optional)

• Disable/enable animation with easing controls

• Gradient support (with angle, from, to colors)

• Optional percentage text inside the bar

• Rounded corners, opacity, shadow toggle

• Completion color + redirect URL when reaching 100%

• Start/end offsets (progress doesn’t have to start at 0%)

• Reverse direction (right-to-left or bottom-to-top)

• Fully themeable: colors, fonts, thickness, radius

✅ Use Cases

• Blog posts or long-form articles (show reading progress)

• Landing pages (encourage scrolling to the end)

• Portfolio sites (indicate project/story progress)

• Documentation or tutorial pages

• Marketing pages with storytelling flow

✅ Built For

• Designers & creators who want to add a professional, interactive scroll indicator.

• Framer users who want a plug-and-play solution without custom code.

✅ Instructions

1. Drag the Multi Scroll Progress Bar component onto your canvas.

2. Choose the orientation (Top, Bottom, Left, Right) from the right panel.

3. Adjust thickness, colors, radius, opacity as needed.

4. Enable gradient or percentage text for extra style.

5. Turn on/off smooth scroll or animation in settings.

6. Optionally set a Completion Color or Redirect URL when progress reaches 100%.

7. Preview your site → scroll and see the bar fill in real-time.