---
title: "CircularProgressFX — Framer component · Best of Framer"
description: "$7.00 · Framer component · by DiverseKit · Text. Editable multi-ring circular progress in"
canonical: "https://framer.elliotli.dev/component/circularprogressfx"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/CircularProgressFX

# CircularProgressFX

Multi-ring circular progress in

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

![CircularProgressFX preview image 1](https://framer.elliotli.dev/og/component/circularprogressfx/02c93f30781cdaba/1600x1200.jpg)

## Summary

Editable multi-ring circular progress in

## Description

CircularProgress FX is a flexible Framer component designed to showcase progress and activity using three independent circular rings. Each ring can represent a different metric—such as completion, usage, or performance—with smooth animated transitions as values update.

You can control the progress percentage, ring thickness, spacing, colors, gradients, labels, text, and animation speed for each circle individually. The layout, typography, background, and interaction styles are fully editable, allowing you to create minimal, bold, or highly expressive designs.

Ideal for dashboards, analytics sections, SaaS products, portfolios, and feature highlights, CircularProgress FX turns static numbers into a clear, visual, and engaging progress experience.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-nf98x5hc-h5psGSpYwCFn1JHwiri0UTTZL1Cb75)](https://diversekit.lemonsqueezy.com/checkout/buy/18e6b00b-cd19-476b-82b5-29e3f7515679)

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

-   All · #8049

## Details

- **Author**: DiverseKit
- **Price**: $7.00
- **Published**: 2026-02-16
- **Updated**: 2026-10-01
- **Added**: 2026-01-30
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing