---
title: "Section Progress Bar — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Liliana Figueras · Interactive. About this component This component is a scroll-based section progress bar designed for long, multi-section websites."
canonical: "https://framer.elliotli.dev/component/section-progress-bar"
---

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

# Section Progress Bar

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

![Section Progress Bar preview image 1](https://framer.elliotli.dev/og/component/section-progress-bar/1cd784979ef6830b/1600x1200.jpg)

## Summary

About this component This component is a scroll-based section progress bar designed for long, multi-section websites.

## Description

## About this component

This component is a scroll-based section progress bar designed for long, multi-section websites. As the page is scrolled, the bar updates to indicate the current section and overall completion. Each segment corresponds to a specific section, providing a clear view of both progress and position within the content. It improves orientation and navigation, especially on content-heavy pages where visual feedback helps convey how much has been covered and what remains.  

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-z1ip5ult-aZX691ReJQu7N7Ubep0JzXZg26x6CD)

**This component can be customized using these properties:**

-   **Background color:** Adjust the background color of the container.
    
-   **Background blur:** Apply a blur effect for visual depth.
    
-   **Border color:** Set the border color or remove it entirely.
    
-   **Radius:** Control the corner rounding of the bar.
    
-   **Padding:** Adjust spacing inside the component (top, right, bottom, left).
    
-   **Gap:** Define the spacing between section markers.
    
-   **Section links:** Assign an anchor link to each section (1–5).
    
-   **Section labels:** Customize the label text for each section (1–5).
    

## Ideal for

-   Case studies
    
-   Portfolios
    
-   Product features
    
-   Editorial sections
    
-   Collections
    

## Support

-   All sales are final. Refunds are only provided if the component does not work as described and the issue cannot be resolved. Please reach out within **7 days of purchase** if you encounter a technical problem.
    
-   For any questions and help setting up the component, contact [hello.lilyfigueras@gmail.com](mailto:hello.lilyfigueras@gmail.com)
    

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

-   All · #3736

## Details

- **Author**: Liliana Figueras
- **Price**: $5.00
- **Published**: 2025-08-25
- **Updated**: 2025-09-14
- **Added**: 2025-08-06
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase