---
title: "RingScroll indicator — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Deven Web Studio · Interactive. ✨ Features Two styles: Ring (stroke progress) & Radial Fill (circle fill) Supports gradient progress colors Adjustable start…"
canonical: "https://framer.elliotli.dev/component/ringscroll-indicator"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/RingScroll indicator

# RingScroll indicator

[View on Framer](https://framer.com/marketplace/components/ringscroll-indicator/?via=elliot-li)

![RingScroll indicator preview image 1](https://framer.elliotli.dev/og/component/ringscroll-indicator/ec1a13b583dad3e3/1600x1200.jpg)

## Summary

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

## Description

✨ 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
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-5febaqf8-sYkTcI72CADBlrzxAfHmdAw6Znw4E6)

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

## Rank history [How rankings work →](/terms#rankings)

-   All · #9241

## Details

- **Author**: Deven Web Studio
- **Price**: $5.00
- **Published**: 2025-09-22
- **Updated**: 2025-09-22
- **Added**: 2025-09-11
- **Categories**: Interactive

## More like this

-   [Retro TV Tilt Axis](/component/retro-tv-tilt-axis) — Zac Nielson · $9 — Immersive retro TV section
-   [Arkanoid Secret Game](/component/arkanoid-secret-game) — Dulaj Design · $8 — About Arkanoid Secret Game brings the classic, addictive arcade brick breaker experience directly into your Framer projects.
-   [Forma Object](/component/forma-object) — Reza Pahlevi · $19 — Rotate, compare & explore finishes
-   [Neon Sign Designer](/component/neon-sign-designer) — Luke Sn · $39 — Custom sign previews and estimates