---
title: "Dashed Progress Bar — Free Framer component · Best of Framer"
description: "Free Framer component · by Michael Stevanus Hartono · Interactive. Animated dashed circular progress bar"
canonical: "https://framer.elliotli.dev/component/dashed-progress-bar"
---

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

# Dashed Progress Bar

Animated dashed circular progress bar

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

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

## Summary

Animated dashed circular progress bar

## Description

### Customizable properties

-   Starting Point: 0 - 100
    
-   Progress: 0 - 100
    
-   Progress Suffix
    
-   Label
    
-   Label Spacing
    
-   Number Font
    
-   Label Font
    
-   Label Font Color
    
-   Number Font Color
    
-   Conic Gradient Toggle
    
-   Gradient Color
    
-   Progress Color
    
-   Background
    
-   Stroke Width
    
-   Animation Toggle
    
-   Animation Duration
    

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

-   All · #7093

## Details

- **Author**: Michael Stevanus Hartono
- **Published**: 2026-02-10
- **Updated**: 2026-02-09
- **Added**: 2026-01-31
- **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