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

1. Drag the Circular Scroll Progress component into your canvas.

2. Choose style mode (Ring or Radial Fill).

3. Customize colors, stroke thickness, gradients, opacity, etc.

4. (Optional) Add text inside the circle (% or custom).

5. Position the indicator (top-left, bottom-right, center, etc.).

6. (Optional) Enable click behavior (scroll to top/bottom, open URL).

7. Adjust start / end offsets if you don’t want progress to track the entire page.

8. Preview in the live canvas — the circle will update as you scroll.