RingScroll indicator
A customizable circular scroll progress indicator for Framer. Perfect for reading progress, scroll-to-top buttons, or engaging page visuals.
Make it with Workshop
Build your own component with AI
A customizable circular scroll progress indicator for Framer. Perfect for reading progress, scroll-to-top buttons, or engaging page visuals.
Make it with Workshop
Build your own component with AI
✨ Features
Two styles: Ring (stroke progress) & Radial Fill (circle fill)
Supports gradient progress colors
Adjustable start angle for ring progress
Text display modes: none, percentage, or custom text inside circle
Responsive: separate desktop & mobile sizes
Configurable positioning (corners or center)
Optional click actions: scroll to top, scroll to bottom, open URL
Hide at 0% or 100% (start/end)
Opacity, shadow, auto fade-in controls
Smooth animated updates
Completion color when scroll = 100%
Lightweight and fully responsive
📖 Use Cases
Show article reading progress
Add a scroll-to-top button with progress indicator
Indicate page completion for onboarding / guides
Visual feedback for long-form pages
Decorative / branding element to match site identity
🛠 Built For
Designers & developers building long-scroll experiences in Framer
Blogs, magazines, and content-heavy websites
Portfolios and storytelling sites
SaaS / docs websites with long product pages
📋 Instructions
Drag the Circular Scroll Progress component into your canvas.
Choose style mode (Ring or Radial Fill).
Customize colors, stroke thickness, gradients, opacity, etc.
(Optional) Add text inside the circle (% or custom).
Position the indicator (top-left, bottom-right, center, etc.).
(Optional) Enable click behavior (scroll to top/bottom, open URL).
Adjust start / end offsets if you don’t want progress to track the entire page.
Preview in the live canvas — the circle will update as you scroll.
