---
title: "Linear Progress Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Elemis Themes · Charts. Linear Progress Bar is an animated Framer component for showing percentages with style and precision."
canonical: "https://framer.elliotli.dev/component/linear-progress-bar"
---

[Home](/)/[Components](/components)/[Charts](/components/category/charts)/Linear Progress Bar

# Linear Progress Bar

Animated progress bar

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

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

## Summary

Linear Progress Bar is an animated Framer component for showing percentages with style and precision.

## Description

🔗 [Live preview →](https://linear-progress-bar-preview.framer.website/)

👉 [Browse our free templates →](https://www.framer.com/@elemis-themes/?tab=template&sort=popular)

**Linear Progress Bar** is an animated Framer component for showing percentages with style and precision. It features smooth width transitions, optional scroll-into-view reveal, and full control over fonts, colors, spacing, height, and radius — all inside Framer.

### Key Features

• Smooth animated fill with adjustable duration

• Scroll-based reveal animation

• Label + value with full font controls

• Custom colors, height, radius, and spacing

• Clean, responsive and lightweight

### Where to Use

Skills, stats, dashboards, resumes, portfolios, and UI sections that need visual progress.

### Customization

Control text, fonts, colors, bar size, animation timing and layout — no code edits needed.

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

-   All · #1936

## Details

- **Author**: Elemis Themes
- **Published**: 2026-02-10
- **Updated**: 2026-09-30
- **Added**: 2026-02-01
- **Categories**: Charts

## More like this

-   [29 Radar Chart](/component/29-radar-chart) — BrandingUp · Free — Spider chart with per-axis scales
-   [33 Bubble Chart](/component/33-bubble-chart) — BrandingUp · Free — Bubble chart with 3rd-value sizes
-   [Pricing Matrix](/component/pricing-matrix) — Ainsley Holmes · Free — Currency Payment Comparison Matrix
-   [Radial Dial](/component/radial-dial) — Oli Studio · $10 — Animated dial for a single metric