5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T77f,

Detailed Description:

Elevate your web projects with this professional Circle Progress Bar component. Built with performance and aesthetics in mind, it features smooth Ease-Out Expo animations and offers complete control over every visual element. Whether you need to show skill levels, project completion, or financial statistics, this component adapts to your design perfectly.

Key Features:

Smooth Easing: Powered by a premium Ease-Out Expo animation for a high-end feel.
Extended Typography: Full control over font size, weight, and spacing for both the counter and label.
Dual Width Control: Customize the progress bar and background track thickness independently.
Directional Control: Supports both Clockwise and Counter-clockwise animations.
Flexible Formatting: Easily add custom prefixes (e.g., $), suffixes (e.g., %), and set decimal points.
Fully Responsive: Perfectly scales within any container without losing quality.
Appear Animation: Triggers beautifully as soon as it enters the user's viewport.

Property Controls (For Documentation):

Number & Percent: Set the target value and the visual fill percentage.
Bar & Track Color: Complete color customization to match your brand.
Start Angle: Choose where the animation begins (e.g., top, bottom, or side).
Label Support: Optional secondary text for context (e.g., "Success Rate").

🏷️ Tags (Search Keywords):

Circle Progress, Animated Loader, Data Visualization, Dashboard UI, Progress Indicator, Framer Component, SVG Animation.

5a:[["$","$L5d",null,{"post":{"id":"019e1bb8-224c-7aa5-bd57-62668ed62ba8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"b5aa35e3-45c6-42b5-bd38-864a17d04eaa","name":"Ux Prex","slug":"ux-prex","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/556174/avatar-dfoZGDfCU2BJuNeoLPBR9tevQHSEef.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"VvajstaVj3rIogpZ8kGY","resolved":true,"title":"ProgressBarr","body":"$5e","bodyJson":null,"introduction":"Animated Circle Progress Bar","slug":"progressbarr","author":{"framerUserId":"b5aa35e3-45c6-42b5-bd38-864a17d04eaa","name":"Ux Prex","slug":"ux-prex","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/556174/avatar-dfoZGDfCU2BJuNeoLPBR9tevQHSEef.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/VvajstaVj3rIogpZ8kGY/progressbarr-fMw5MUDcqMsEy7pVxqfACR6k8dpgMO","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-06T18:40:56.689Z","updatedAt":"2026-08-02T18:04:40.667Z","publishedAt":"2026-05-12T10:25:12.780Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://circle-progressbar.framer.website","price":"2","paymentUrl":"https://uxprex.lemonsqueezy.com/checkout/buy/2e80e700-809d-44de-a2ac-be921537056b","workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"GSlg5MKUMQ9kttNFZQn4","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":19,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-12T10:25:12.780Z","updatedAt":"2026-05-12T10:25:12.780Z","reported":false}}],"$L5f"]

Suggested for you