Browse components

Scroll Progress Indicator

A circular scroll progress indicator that doubles as a compact return-to-top control.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:content/scroll-progress-indicator

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSSSVG

Props

PropTypeDescription
targetRefObject<HTMLElement | null>Optional scrollable element ref; defaults to window scroll tracking
progressnumberControlled progress from 0 to 1; skips scroll tracking when set
position'left' | 'right' | 'inline' | 'absolute'Where the compass is placed
sizenumberDiameter in pixels
scrollToTopbooleanWhether clicking it smoothly returns the reader to the top
classNamestringClasses appended to the outer button

More Content Components

Accordion Chevron preview

Accordion Chevron

Minimal accordion with a subtly animated chevron for compact FAQs and supporting details.

62%

Reading Progress

A drawn-line progress indicator with spring-smoothed scroll tracking and a fading percentage.

The quietest interfaces often carry the most conviction.
Elena Voss
Design Director, Lattice

Quote Highlight

Editorial pull quote with oversized glyph, expanding rule, and blurred fade-in.