---
title: "Progress Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Ammar Hassan · Interactive. This component makes it easy to display progress that smoothly fills from top to bottom in a vertical layout."
canonical: "https://framer.elliotli.dev/component/progress-bar"
---

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

# Progress Bar

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

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

## Summary

This component makes it easy to display progress that smoothly fills from top to bottom in a vertical layout.

## Description

This component makes it easy to display progress that smoothly fills from top to bottom in a vertical layout. Perfect for completion tracking, scroll progress, and data visualization, it supports fully customizable colors and animations. Simply connect it to any scroll section to create dynamic progress indicators that animate based on scroll position.

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

-   All · #1134

## Details

- **Author**: Ammar Hassan
- **Published**: 2025-08-09
- **Updated**: 2025-08-09
- **Added**: 2025-07-31
- **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