RingScroll indicator

✨ Features Two styles: Ring (stroke progress) & Radial Fill (circle fill) Supports gradient progress colors Adjustable start angle for ring progress Text display modes: none,…

✨ 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.