5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/077g_l9cwe8hz.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/2885u7skzba5_.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/0djs9po3g19ek.js","/creators-assets/_next/static/immutable/chunks/1_ej2mmnwnp37.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0bcmpcsc4ih7d.js"],"PostDetailCard"] 5d:T8dd,

Checking Demo: Live demo

Smart Scroll UI – Scroll Progress Bar & Ring for Framer

Smart Scroll UI is a responsive, customizable scroll indicator for Framer. Choose between a modern progress bar or a sleek circular ring to visualize how far users have scrolled. Perfect for blogs, landing pages, portfolios, or any content-heavy layout.

Features:

✅ Bar or Ring display styles
✅ Clickable circular indicator (scroll to top)
✅ Supports dark mode (auto-detect)
✅ Scroll threshold trigger with event callback
✅ Auto-hide on scroll direction
✅ Fully customizable: size, color, gradient, radius, style
✅ Canvas fallback for smooth Framer editing
✅ Lightweight and responsive

Use Cases:

Long-form articles
Documentation pages
Blog templates
Interactive landing pages
Component kits in Framer

Built for:

Framer Free & Pro plans
Compatible with both light and dark themes
Zero-code designers and developers alike

Instructions:

Drag the Scroll Progress Bar code component into any Framer page.
Choose Bar or Round style from the properties panel.
Customize colors, position, scroll behavior, and effects.
Preview to see it in action — works out of the box.License
Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.
Refund Policy
Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

59:[["$","$L5c",null,{"post":{"id":"0198a8e1-a643-7a38-88f6-ba34701e492e","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"90edcf3a-8a79-462e-aae8-b05ccb06502f","name":"EvolveHub","slug":"evolvehub","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1059020/avatar-PJxUw0rnOAwHJ69DyaqJjl9qjrtOse.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"z1GkKONTJ1CpdaxeuVZb","resolved":true,"title":"Scroll Progress ","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customImage","attrs":{"alt":"","src":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-ovoo5tse-HAgtZAwX9CHEvMOoLdZKRyxhUs6Tyq","link":null,"caption":"","uploadId":null}},{"type":"paragraph","content":[{"type":"text","text":"Checking Demo:"},{"type":"text","text":" Live demo","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer","href":"https://odd-nature-479732.framer.app/","class":null,"target":"_blank"}}]}]},{"type":"customHeading","content":[{"type":"text","text":"Smart Scroll UI – Scroll Progress Bar & Ring for Framer"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Smart Scroll UI is a responsive, customizable scroll indicator for Framer. Choose between a modern "},{"type":"text","text":"progress bar","marks":[{"type":"bold"}]},{"type":"text","text":" or a sleek "},{"type":"text","text":"circular ring","marks":[{"type":"bold"}]},{"type":"text","text":" to visualize how far users have scrolled. Perfect for blogs, landing pages, portfolios, or any content-heavy layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Features:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Bar or Ring display styles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Clickable circular indicator (scroll to top)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Supports dark mode (auto-detect)"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Scroll threshold trigger with event callback"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Auto-hide on scroll direction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Fully customizable: size, color, gradient, radius, style"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Canvas fallback for smooth Framer editing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"✅ Lightweight and responsive"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Use Cases:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Long-form articles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Documentation pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Blog templates"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive landing pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Component kits in Framer"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built for:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer Free & Pro plans"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Compatible with both light and dark themes"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Zero-code designers and developers alike"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Instructions:","marks":[{"type":"bold"}]}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drag the Scroll Progress Bar code component into any Framer page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose Bar or Round style from the properties panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize colors, position, scroll behavior, and effects."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview to see it in action — works out of the box."},{"type":"text","text":"License","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Single Use License","marks":[{"type":"bold"}]},{"type":"text","text":" — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client."}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!"}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"scroll bar, progress bar circular","slug":"scrollprogressbar","author":{"framerUserId":"90edcf3a-8a79-462e-aae8-b05ccb06502f","name":"EvolveHub","slug":"evolvehub","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1059020/avatar-PJxUw0rnOAwHJ69DyaqJjl9qjrtOse.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/90edcf3a-8a79-462e-aae8-b05ccb06502f/zi6ymzzj"}],"post":null,"createdAt":"2025-08-03T17:45:31.288Z","updatedAt":"2026-06-23T03:28:11.210Z","publishedAt":"2025-08-14T14:00:17.219Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://forceful-principles-656315.framer.app/","price":"5","paymentUrl":"https://evolvehub.lemonsqueezy.com/checkout/buy/b2d6f404-daa0-4f1d-b50c-8c0498e73027","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"4irmQSomoBjboECkAJLB"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-14T14:00:17.219Z","updatedAt":"2025-08-14T14:00:17.219Z","reported":false}}],"$L5e"]

Suggested for you