5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3--j3w_sytan8.js","/creators-assets/_next/static/immutable/chunks/2teqp45pn56pt.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0dst_b4k0u8kl.js","/creators-assets/_next/static/immutable/chunks/380lj13lztxlh.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/202b1r_evm3sb.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/0hhnnecj8-hto.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/0mzwmcm2-ik50.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/1jvl5pseyb1ld.js","/creators-assets/_next/static/immutable/chunks/1602xfiu5d3wp.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/1tmy_9cuep5o7.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3--j3w_sytan8.js","/creators-assets/_next/static/immutable/chunks/2teqp45pn56pt.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0dst_b4k0u8kl.js","/creators-assets/_next/static/immutable/chunks/380lj13lztxlh.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/202b1r_evm3sb.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/0hhnnecj8-hto.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/0mzwmcm2-ik50.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/1jvl5pseyb1ld.js","/creators-assets/_next/static/immutable/chunks/1602xfiu5d3wp.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/1tmy_9cuep5o7.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T5ce,

Why this component?

Most progress bars try to do too much. This one does exactly what you need — and does it well.

Clean, modern design
Easy to understand at a glance
Built for real UI use cases

Key Features

Adjustable Progress Value: Easily set the percentage with a slider or input — quick and precise control.
Custom Colours: Change both the fill and background colours to match any brand or UI theme.
Flexible Corner Radius: From sharp edges to fully rounded bars — adapt the shape to your layout style.
Optional Label Display: Show or hide the percentage label depending on your design needs.
Label Styling Control: Customise label colour and font for better readability and visual consistency.
Smooth Animation Control: Adjust duration and delay to create subtle, clean motion — no overdone effects.
Responsive & Stretchable Works seamlessly in any width — from thin lines to full-width sections.

5a:[["$","$L5d",null,{"post":{"id":"019e210b-3dbf-7fe9-8451-f1452bb42abf","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"19b93f4c-6551-4212-b697-1d3d6aa68670","name":"Miten Chauhan","slug":"miten-chauhan","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"3oBDPNzcHxP4tgUFLrM6","resolved":true,"title":"ProgressBar","body":"$5e","bodyJson":null,"introduction":"Simple & Effective Progress Bar","slug":"progressbar","author":{"framerUserId":"19b93f4c-6551-4212-b697-1d3d6aa68670","name":"Miten Chauhan","slug":"miten-chauhan","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/3oBDPNzcHxP4tgUFLrM6/progressbar-niTCQC9kmYQytnNidaKsseIREdaFj5","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-01T08:30:13.957Z","updatedAt":"2026-05-13T11:13:44.239Z","publishedAt":"2026-05-13T11:14:05.375Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ProgressBar-HYDJHI.js@0zkhMTWJnSpu6jFftxzE","previewUrl":"https://simple-progress-bar.framer.website/?editSite","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"0zkhMTWJnSpu6jFftxzE","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-13T11:14:05.375Z","updatedAt":"2026-05-13T11:14:05.375Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019e210b-3dbf-7fe9-8451-f1452bb42abf"},"postId":"019e210b-3dbf-7fe9-8451-f1452bb42abf","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you