---
title: "Progress Scroll Bar — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Deven Web Studio · Interactive. ✅ Features Horizontal (top/bottom) and Vertical (left/right) progress bars Sticky or relative positioning Smooth scroll…"
canonical: "https://framer.elliotli.dev/component/progress-scroll-bar"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Progress Scroll Bar

# Progress Scroll Bar

[View on Framer](https://framer.com/marketplace/components/progress-scroll-bar/?via=elliot-li)

![Progress Scroll Bar preview image 1](https://framer.elliotli.dev/og/component/progress-scroll-bar/61f0292c7db9b3c6/1600x1200.jpg)

## Summary

✅ Features Horizontal (top/bottom) and Vertical (left/right) progress bars Sticky or relative positioning Smooth scroll syncing (optional) Disable/enable animation with easing…

## Description

✅ 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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10145

## Details

- **Author**: Deven Web Studio
- **Price**: $5.00
- **Published**: 2025-09-13
- **Updated**: 2025-09-12
- **Added**: 2025-08-30
- **Categories**: Interactive

## More like this

-   [Drawing component](/component/drawing-component) — Ariel Barrios · Free — Just a free drawing component
-   [Code Comparison](/component/code-comparison) — Syauqizaidan Khairan Khalaf · $5 — Before and after code side by side
-   [Voice Testimonials](/component/voice-testimonials) — valorsic studio · $15 — Voiceover & typewriter reviews
-   [Product Tour Pro](/component/product-tour-pro) — Oddframe · $10 — Showcase Products Step by Step