---
title: "Scroll Progress Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by craftedbyMiaヅ · Interactive. ScrollProgressBar for Framer – Visualize Page Scroll Progress A lightweight Framer code component that creates a customizable…"
canonical: "https://framer.elliotli.dev/component/scroll-progress-bar"
---

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

# Scroll Progress Bar

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

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

## Summary

ScrollProgressBar for Framer – Visualize Page Scroll Progress A lightweight Framer code component that creates a customizable progress indicator linked to the user’s scroll…

## Description

**ScrollProgressBar for Framer – Visualize Page Scroll Progress**A lightweight Framer code component that creates a customizable progress indicator linked to the user’s scroll position. Perfect for long-form pages, editorial layouts, portfolios, or any site where you want to give visitors a clear sense of reading progress. The bar automatically tracks scroll position and animates smoothly across the viewport with full control over color, thickness, and orientation.

Features

-   Horizontal or vertical orientation (top, bottom, left, right)
    
-   Adjustable thickness in pixels
    
-   Customizable color
    
-   Smooth, real-time scroll tracking
    
-   Fixed position overlay (always visible)
    
-   Minimal and performant — no extra setup required
    

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

-   All · #1459

## Details

- **Author**: craftedbyMiaヅ
- **Published**: 2025-09-04
- **Updated**: 2025-09-07
- **Added**: 2025-08-20
- **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